11.CSS布局篇之响应式——rem

rem是什么？

px，绝对长度单位，最常用

em，相对长度单位，相对于父元素，不常用

rem，相对长度单位，相对于根元素，常用于响应式布局
响应式布局的常用方案

media-query,根据不同屏幕宽度设置根元素font-size

rem,基于根元素的相对单位

rem的弊端：“阶梯性”

响应式布局能同时兼容多个终端，比如（手机、平板、PC）做一个网站转眼间就可以变成3个网站。可能有些人对“什么是响应式布局”还不是很了解，下面达内长沙web培训就跟大家简单说下什么是响应式布局：响应式布局：简单点说，就是做一个网站同时能兼容多个终端，由一个网站转变成多个网站，为我们大大节省了资源。那么响应式布局的优点和缺点又有哪些呢？优点：1面对不同分辨率设备灵活性强2能够快捷解决多设备显示适应问题缺点：不能完全兼容所有浏览器，代码累赘，加载时间加长。说了这么多，可能还有很多人，不明白响应式布局该怎么去做，以及它的开发原理是什么？原理：简单点说响应式布局它是通过CSS中MediaQuery（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。

一、静态布局（StaticLayout）

即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。

1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。

2、设计方法：

PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap或m。

在移动端开发中采用静态布局的两种方式：

（1）在viewportmeta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-webapp变革之rem）

（2）设在viewportmeta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。

优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。

缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。

二、流式布局（LiquidLayout）

流式布局（Liquid）的特点（也叫"Fluid")是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用），例如，设置网页主体的宽度为80%，min-width为960px。也作类似处理（width:100%,max-width一般设定为本身的尺寸，防止被拉伸而失真）。

1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示

2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域(viewport)和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

三、自适应布局（AdaptiveLayout）

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

2、设计方法：使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

四、响应式布局（ResponsiveLayout）

随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局d性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

响应式几乎已经成为优秀页面布局的标准。

1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

2、设计方法：媒体查询流式布局。通常使用@media媒体查询和网格系统(GridSystem)配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过CSS给单一网页不同设备返回不同样式的技术统称。

   响应式网页设计 （英语：Responsive web design，通常缩写为 RWD ），也称为自适应网页设计，这一项网页设计的技术可以使得网站在不同的设备上都有一个合适的呈现，减少了用户进行缩放，移动等 *** 作行为的次数。对前端工程师来说使用响应式布局设计 更易于维护网页。因为移动流量现在占互联网流量的一半以上，响应式布局变得更加的重要。

响应式布局 技术的概念是伴随着CSS3的媒体查询技术的出现而产生的，现在已成为优秀页面布局的标准，是当今主流的设计。其中，Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。本人曾做过网页设计相关的工作深知响应式设计对于提升用户体验的重要性。不少朋友希望学习响应式布局技术却苦于没有办法找到合适的实例，我多年搜集了一套实用的HTML5响应式模板。涵盖各领域，可以直接修改 ，详情请看

众所周知，屏幕的尺寸千差万别。在考虑网页布局时，主要考虑：

同时，网页布局还应该综合考虑设计和实现上的问题：

虽然屏幕宽度、高度、宽高比千差万别。但是网页的组织方式基本上是以宽度适配，高度延伸为主。

当然，也有部分网页是需要考虑高度适配的，如视频网站的全屏播放。

这里主要讨论的是宽度适配。高度适配可以做类似处理，在这里就不做赘述。

网页基础的布局主要有三种： 静态布局、流失布局、d性布局 。

静态布局

静态布局采用像素（px）作为页面设计的单位。在不同的显示宽度下，页面元素大小都是固定的。

流式布局

流式布局以百分比设定页面宽度，当显示区域变化时，页面布局会等比的发生改变。

流式布局强调的是适应屏幕宽度的变化。在实际应用中，经常是设置成宽度适应，而高度不变。当页面变大时，页面布局相当于被横向拉宽了。

d性布局

d性布局采用rem/em等相对单位，rem/em是相对的单位会随着屏幕变化而变化。

d性布局更强调的是在不同的条件下，显示内容除了大小不一样，其布局是一致的。也就是说，d性布局会宽度和高度都等比放大。当页面变大时，整个页面等比放大了。

假设有两个屏幕尺寸，一个是640px，一个是1080px。有个元素在640px页面下的尺寸是64px。

如果是静态布局，在640px屏幕下，元素被设置为64px。到了1080px屏幕下，依然是64px。元素的大小不变。

如果是流式布局，页面元素会被设置成640px屏幕宽度的10%。在1080px屏幕下，10%的长度变成了1080px 10% = 108px了。元素大小随着屏幕变大了。

如果是d性布局，假设在640px的屏幕下，设置1rem = 16px，那么 64px即为4rem大小。在1080px的屏幕下，设置1rem = 27px，4rem的大小变成了 4 27 = 108px。元素大小也随着屏幕变大了。

静态布局

静态布局没办法响应页面的变化，这个是优点也是缺点。

缺点是当屏幕变大时，会出现空白区域。当屏幕变小时，需要通过滚动条来浏览页面内容。

优点则是因为静态页面可以在任何条件下都按页面的设计进行显示，其适配性的问题最少，实现工作量最小。

实际上，目前很多大型的网站都是采用静态布局的。就是看中了其广泛的适配性，几乎不存在什么适配性问题，任何用户在任何条件下打开页面都显示的都是一样的。

虽然说屏幕尺寸种类繁多，但是在一定程度上屏幕宽度大体还是在一个范围之内的。应用静态布局时，可以适当放弃适配一些市场占有率很少的小屏幕显示器。

流式布局

流式布局大部分都是采用宽度适配，固定高度的方式。也就是说，页面此次被横向拉长或缩小了。

这样做的优点是页面可以适配屏幕的宽度，可以充分利用屏幕的面积，不至于出现大量空白的情况。

其缺点是，当屏幕过于宽时，页面会被拉得宽，整体显得不太协调。当屏幕过于窄时，页面会被缩得很小，部分元素的显示会出现问题。

为了规避这个问题，在实际应该上。一般会设置一个最大和最小适配宽度。当屏幕超过了最大最小宽度时，页面将不再适配屏幕。

d性布局

d性布局采用的是宽度和高度同时放大的方式，力求让页面在不同屏幕下在布局上是一致的。

d性布局兼顾了静态布局和流式布局的优点，一方面其可以适配屏幕的变化，另一方面不会导致页面被横向拉宽导致比例不协调，在一定程度上保证页面布局和原设计一致。

但是这么做也带来了新的问题，页面加大会导致部分元素被拉伸，特别是元素，会导致失真。

所以d性布局经常也采用了和流式布局一样的方式，设置最大最小响应尺寸，超过这个尺寸则不继续响应。

同时，针对失真问题，可以通过上传多个尺寸的进行解决。不同的屏幕尺寸响应不同的。不过因此也会带来了大量的维护工作，需要权衡。

由于静态布局特点，一般下列情况下会采用静态布局：

流式布局比较适用于文字型的页面。在流式布局中，虽然文字大小不会变化，但是文字段落仅需要改变换行就可以跟着宽度变化而变化。

如果屏幕尺寸变化不大，则可以考虑采用d性布局的方式。既可以适配，又不改变页面的布局。

事实上，也有一些页面采用了几种不同的布局方式。例如，采用静态布局的侧边栏，而采用流式布局的主区域。

上文也讨论了流式布局和d性布局不适合对尺寸跨度过大的屏幕进行适配。所以，基本上也都采用了限制最大最小适配尺寸，在适配范围内则采用流式布局或d性布局进行适配。超过了适配范围，则变成静态布局的方式，不再响应屏幕的变化。

上面讨论的几种网页的基础布局一定程度上解决了页面适配的问题。但是随着显示终端的发展，出现了平板电脑、移动设备等屏幕。这些设备出现加大了屏幕尺寸的跨度。而上面讨论的几种网页布局恰恰是不支持屏幕尺寸跨度太大的情况的。

相比之下，自适应布局和响应式布局更能解决屏幕跨度过大的问题。

自适应布局

自适应布局为不同尺寸的屏幕准备多套方案，根据不同的屏幕尺寸确定一套显示方案。具体到每一套方案，则可以用上述几种基础的网页布局进行适配。可以看成是一系列的基础布局组成的一套方案。

一般自适应布局会设计宽屏、窄屏、移动端等几套适配方案，然后设定屏幕适配的范围。具体显示时，会根据屏幕尺寸匹配适配范围，选定其中的一套方案进行显示。

但是自适应布局一般情况下不会改变页面的结构。当页面缩小时，会选择缩小、替换、隐藏掉一些横向的页面元素，以达到适配的目的。有一些常见的处理方法：

响应式布局

响应式布局则是设置一套方案，通过调整行列的显示进行适配。当屏幕较大时，各个元素显示成一行，当屏幕变小时，转换转化成以列进行显示。

响应式布局因为需要换行来适配屏幕。所以其在页面缩小的过程中，页面布局会做改变。当页面缩小时，页面会先以流式布局或d性布局的方式进行缩小，直至页面宽度再也无法适配时，横向显示的元素换行成纵向显示。

自适应布局

自适应布局需要设计是一系列页面布局。所以，在设计和实现上需要更多时间。

但是，因为其可以针对不同屏幕设计不同方案，方案之间相对独立。其限制较少和自由度却是比较高的。

但是注意，自适应并非几套完全不同的方案的组合，一般情况下，其主体部分是一致的。只是对部分横向的元素进行独立设计。

响应式布局

响应式布局只需要一个页面布局即可完成屏幕适配，其实现工作量比较小。但是，因为需要用一套方案适配所有屏幕尺寸。所以，在设计上需要考虑的因素比较多。

总的来说，自适应布局适用于较为复杂的页面，而响应式布局适用于页面结构简单的页面。

因为移动端和PC端的巨大差异，包括屏幕尺寸和 *** 作方式都不尽相同。还有一种解决方案将各个端的页面单独进行设计。

这种方案优点是各个显示端可以自由的根据自身情况进行设计，从而设计出专门针对各个显示端的方案。这无疑给设计师和用户体验带来了巨大的好处。

但是这种方案带来了成倍的设计和实现工作量。同时，在产品投入使用后需要两套人马分别维护其内容。

如果您有如下的情况，可以考虑使用移动端和PC端分离的设计：

写在最后

并没有十全十美的方案，根据自身情况进行选择才是硬道理。

作为设计者，千万不要忘记了后期技术的实现、测试，运营人员的维护等工作量。同时也不要忘记了项目后期的迭代的难度。一句话，选择适合的才是最重要的。

要知道，看似很土的静态布局到现在仍然有大量的应用。千万不要做过度的设计。

在谈WEB前端怎么布局前，我们先梳理前端的布局类型，具体有以下几种：

1静态布局：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。

2流式布局：布局特点是屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。

3自适应布局：自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。

4响应式布局：布局特点是每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

那么我们如何布局呢？通过以下几点来选择布局。

1如果只做电脑端，最好的选择是静态布局。

2如果做移动端，且设计对高度和元素间距要求不高，那么d性布局（remjs）是最好的选择，通过一份css一份js调节font-size就搞定。

3如果电脑端，移动端要兼容，而且要求很高，那么响应式布局还是最好的选择。前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

近期学习，有很多感想，有时候看似相近的概念，其实意义却不相同。所以学习要针对不同的名词有明确的区分意识。

抽空时间，打算学习下display:flex;本以为就是一个小小的知识点，正式去研究的时候，才发现display:flex;有很多内容，能实现很多效果。比如三栏布局（左右两栏固定，中间栏自适应），圣杯布局。

后来想着经常听到流式布局，自适应布局，响应式布局，他们有什么区别呢，就去搜了许多内容查看，才发现每种布局都有优缺点和不同使用场景。

静态布局 ：给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。针对不同分辨率的手机端，分别写不同的样式文件。

自适应布局 ：创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用 @media媒体查询 技术。

流式布局 ：元素的宽高用 百分比 做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。

响应式布局 ：采用自适应布局和流式布局的综合方式，为 不同屏幕分辨率范围 创建 流式布局 。

d性布局 ：要点在于使用 <tt>em和rem单位</tt> 来定义元素宽度，与流式布局有极大的相似性，但也有不同之处，主要区别在于d性布局的尺寸主要根据字体大小而变化。

至于display:flex;相关知识，我就不赘述了，推荐阮一峰的博客 >什么是移动端响应式布局呢？
移动端响应式布局就是根据用户使用不同大小的手机时，会展示不同样式的布局，这便是响应式布局，虽然响应式布局好处多多，但也有诸多坏处，它需要庞大的人力以及财力，以及很高维护成本，而且会极大的耗损用户的流量。因此只有大公司才会用，但很多大公司也不会采用。
首先会用到媒体查询：
@media screen and (min-width: 1001px) { // 屏幕宽度 > 1001时采用的样式}
@media screen and (max-width: 1001px) { // 屏幕宽度 < 1001时采用的样式}

这样，当屏幕小于1001时，会出现一个版，屏幕大于1001时又会出现一个版，这样给不同用户展示不一样的版，有利于提高用户的体验。

---