响应式布局

响应式布局之 px、em、 rem

阅读更多关于响应式布局之 px、em、 rem

一、写在前面的话　　作为一面前端开发者，对 px 、em 、 rem 应该是再熟悉不过了，但大多数小伙伴应该都和我一样仅仅停留在了解的层面，并不是实质性的掌握它们。本文对三者进行了详细的总结和详细说明，不熟悉的各位小伙伴阅读本文一定会有所收获，如果你对这三者已经了解的非常透彻，那本文可能对你的帮助不大。二、简述　　px、em、rem都是计量单位，都能表示尺寸，但是有有所不同，而且其各有各的优缺点。三、PX （pixel）　　Px 表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。注： 1、像素 1024x768 的，表示的是水平方向是 1024 个像素点，垂直方向是 768个像素点。　　 2、以上所述 px 为 css 中定义的像素（以下简称 css 像素），与实际的物理像素是有区别的，早期电脑屏幕的物理像素与 css 像素相同，但是随着科技的发展，高精度屏幕开始出现在人们的视野中。以 iPhone 的 Retina　　屏为例，其物理像素与 css 像素关系见下图。　　为此移动端浏览器以及某些桌面浏览器引入了 devicePixelRatio（DPR 设备像素比）属性，其官方的定义为

响应式布局与自适应布局的区别

阅读更多关于响应式布局与自适应布局的区别

rem ·rem单位：CSS3 新增的一个相对单位；相对于根元素html的font-size的值进行动态计算得到的，如font-size：14px，1rem = 14px。例：根据当前屏幕宽度和设计稿宽度计算html-fontsize的值设计稿宽度：640px，fontsize：14px，屏幕宽度是375px，则font-size = 375/640*14 即：375/600 = fontsize/14 如果html的fontsize的值改变了，之前设定的所有rem单位的值自动会跟着放大或者缩小；目前移动端响应式布局，推荐使用 rem。注意：rem需要配合媒体查询才可实现响应式布局 em ·em单位:相对于父元素字体大小，默认情况下，1em = 16px 一般适用于响应式，但不推荐使用，计算比较繁琐。 vw/vh vw单位：viewpoint width 视窗宽度的百分比（1vw 代表视窗的宽度为 1%） vh单位：viewpoint height 视窗高度的百分比（1vh 代表视窗的高度为 1%）一般适用于百分比布局。响应式布局和自适应布局区别 1.自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端，在客户端做代码处理，来展现不同的布局和内容。 2

rem单位 -- 响应式布局

阅读更多关于 rem单位 -- 响应式布局

<!DOCTYPE html>     < html class = "no-js" >  < head > < meta charset = "utf-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < title > 实名认证 </ title > < meta name = "description" content = "" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = "" > < style > * { margin : 0 ; padding : 0 ; } body {

响应式、自适应式

阅读更多关于响应式、自适应式

一点点补充响应式布局与自适应布局的区别： 1.自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。 2.自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。 1、灵活性不同：静态布局：毫无灵活性可言，目前已逐渐被淘汰。自适应布局：静态布局的升级版，因其强大的灵活性，已逐渐成为高端网页的代名词。流式布局：灵活性更高，可适用于其他三种网站布局。响应式布局：自适应布局的升级版，响应式网站要普遍适应市面上各类屏幕，开发难度和工作量都是非常大的，开发价格自然比普通网站高。 2、设计方法不同：静态布局：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分。自适应布局：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。流式布局：使用百分比定义宽度，高度大都是用px来固定，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。响应式布局：媒体查询+流式布局。使用@media媒体查询和网格系统配合相对布局单位进行布局，就是综合响应式、流动等上述技术通过 CSS

阅读更多关于响应式布局

响应式布局原则：移动端先行 flexbox 实现块流动 grid网格布局实现块布局变化（配合媒体查询）可伸缩图像 max-width：100%; 弹性布局容器设置 max-width：960px; 对于子容器可设置百分比的宽度 Grid网格布局对网格容器设置： display: grid; //网格显示 grid-template-columns: //容器宽度 grid-template-rows: //容器高度 grid-gap: //行和列的间距单位：fr：剩余宽度的百分比 20%：容器宽度的20% 400px：400个像素 repeat：（3，1fr）——重复3次网格元素设置： grid-row：1 / span 2； grid-column：2；// 第一行第二列，占两行 Flexbox布局有一个主容器，其中的子元素就是flex项目，flex 属性和规则都运用到主容器上属性 flex-direction：row（主轴横向）、column（主轴纵向） align-items：center（块之间居中对齐）、flex-start（顶部对齐）、flex-end（底部对齐） justify-content：center（居中、紧贴）、space-between（等间距分布、贴边）、space-around（间隙分布） flex-warp：nowarp（不换行）

响应式布局笔记

阅读更多关于响应式布局笔记

一. 布局设计固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；实现成本最低，但拓展性比较差；弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。参考 https://www.w3cschool.cn/responsive/8w9adozt.html 总结：对于通栏，大于等于2栏的等分排版建议采用弹性布局；大于等于2栏的非等分排版建议采用混合布局；二.布局响应布局响应，对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）；无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点），我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式：布局不变，对模块内的内容进行1.挤压

响应式 Web 设计技巧

阅读更多关于响应式 Web 设计技巧

什么是响应式设计？ iOS 和 Android 的发布，智能手机、平板电脑、智能家电等新设备层出不穷，极大便利了我们的生活，但面对形形色色的终端设备，千差万别的屏幕分辨率，给网页设计带来了新的挑战，我们无法估计用户的终端设备和网络状况，更不可能为每种设备都专门设计一套网站，如何实现 Web UI 在多终端中的适配呢？2010 年 Ethan Marcotte 曾经在 A List Apart 发表过一篇文章"Responsive Web Design"，响应式网页设计提供了一种设计方法，可以使同一网站在智能手机、桌面电脑，以及介于这两者之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸，合理地为现有及将来的各种设备提最佳的浏览体验。 http://mediaqueri.es/ 这是一个响应式设计创意收集网站，可以在上面查看到很多响应式设计实例，较多的网站都应用了 Mobile First 设计思想，先针对小视口设备进行设计，然后逐步对大视口设计进行渐进增强支持。图 1. Froont 响应式设计网站截屏这也意味着设计思维的转换，不应再执着于布局、线框等的具体大小，而应该考虑如何使用流体元素。与其根据不同设备的大小来设计页面，更着重考虑如何针对内容进行设计。抛弃像素，抛弃固定宽度，先从小屏幕进行设计，然后逐步增强针对大屏幕的设计当然也需要引导客户

什么是响应式Web设计？怎样进行？

阅读更多关于什么是响应式Web设计？怎样进行？

说正事儿。准备在近期的几篇里集中翻译学习一下"响应式Web设计"的相关话题，包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文，这些文章篇幅要长的多(甚至要加分页了！)，今天放上的这篇几乎花掉了两天的"闲暇时间"；对耐力是个考验，努力提高喽。废话结束，here we go. 眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐，就是为iPhone、iPad、黑莓、Kindle……各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面？这种疯狂什么时候算个头？在Web设计和开发领域，很快的，我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说，为每种新设备及分辨率创建其独立的版本根本就是不切实际的；结果就是，我们将会赢得使用某些设备的用户群，而失去那些使用其他设备的用户。不过，或许会有另外一种方式，可以帮助我们避免这种情况的发生。响应式Web设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率

响应式布局和自适应布局

阅读更多关于响应式布局和自适应布局

一、区别：响应式布局等于流动网格布局，自适应布局等于使用固定分割点来进行布局二、响应式布局实现不同屏幕分辨率的终端上浏览网页的不同展示方式 1、设置meta标签下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在 <head> 标签里加入这个meta标签。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 　　 2、通过媒体查询来设置样式 media queries media queries是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于980px @media screen and (max-width: 980px) { #head { … } #content { … } #footer { … } } 　　 3、设置多种视图宽度 /** iPad **/ @media only screen and (min-width: 768px) and (max-width: 1024px) {} /** iPhone **/ @media only screen and (min-width: 320px) and (max-width: 767px

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

阅读更多关于静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法：　　 PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；　　移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。　在移动端开发中采用静态布局的两种方式：(来自：流布局与响应式网页设计有什么区别？ ) 　（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-web app 变革之rem ）　（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。（具体见 content"width=640

订阅响应式布局