Html5移动端布局及（rem布局）页⾯⾃适应布局详解
常见的页⾯布局⽅式有，
静态布局  px布局
流式布局（Liquid Layout）主要的划分区域的尺⼨使⽤百分数（搭配min-*、max-*属性使⽤）
⾃适应布局（Adaptive Layout）即创建多个静态布局，每个静态布局对应⼀个屏幕分辨率范围
响应式布局（Responsive Layout）检测窗⼝⼤⼩利⽤bootstrap布局
弹性布局（rem/em布局） css3 rem
结论提前说：
1. 如果只做pc端，那么静态布局（定宽度）是最好的选择；
2. 如果做移动端，且设计对⾼度和元素间距要求不⾼，那么弹性布局（rem+js）是最好的选择，⼀份css+⼀份js调节font-size
搞定；
3. 如果pc，移动要兼容，⽽且要求很⾼那么响应式布局还是最好的选择，前提是设计根据不同的⾼宽做不同的设计，响应式
根据媒体查询做不同的布局。
⼀、静态布局（Static Layout）
即传统Web设计，⽹页上的所有元素的尺⼨⼀律使⽤px作为单位。
1、布局特点：不管浏览器尺⼨具体是多少，⽹页布局始终按照最初写代码时的布局来显⽰。常规的pc的⽹站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果⼩于这个宽度就会出现滚动条，如果⼤于这个宽度则内容居中外加背景，这种设计常见与pc端。
2、设计⽅法：
  PC：居中布局，所有样式使⽤绝对宽度/⾼度(px)，设计⼀个Layout，在屏幕宽⾼有调整时，使⽤横向和竖向的滚动条来查阅被遮掩部分；
  移动设备：另外建⽴移动⽹站，单独设计⼀个布局，使⽤不同的域名如wap.或m.。
　在移动端开发中采⽤静态布局的两种⽅式：(来⾃：)
　（1）在viewport meta标签上设置width=320，页⾯的各个元素也采⽤px作为单位。通过⽤JS动态修改标签的initial-scale使得页⾯等⽐缩放，从⽽刚好占满整个屏幕。（见）
　（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页⾯的各个元素也采⽤px作为单位。由于640px超出了⼿机宽度，浏览器会⾃动缩⼩页⾯⾄刚好全屏。（具体见）
优点：这种布局⽅式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显⽽易见，即不能根据⽤户的屏幕尺⼨做出不同的表现。
当前，⼤部分门户⽹站、⼤部分企业的PC宣传站点都采⽤了这种布局⽅式。固定像素尺⼨的⽹页是匹配固定像素尺⼨显⽰器的最简单办法。但这种⽅法不是⼀种完全兼容未来⽹页的制作⽅法，我们需要⼀些适应未知设备的⽅法。
⼆、流式布局（Liquid Layout）
前端页面模板流式布局（Liquid）的特点（也叫"Fluid") 是页⾯元素的宽度按照屏幕分辨率进⾏适配调整，但整体布局不变。代表作栅栏系统（⽹格系统）。
⽹页中主要的划分区域的尺⼨使⽤百分数（搭配min-*、max-*属性使⽤），例如，设置⽹页主体的宽
度为80%，min-width为960px。图⽚也作类似处理（width:100%, max-width⼀般设定为图⽚本⾝的尺⼨，防⽌被拉伸⽽失真）。
1、布局特点：屏幕分辨率变化时，页⾯⾥元素的⼤⼩会变化⽽但布局不变。【这就导致如果屏幕太⼤或者太⼩都会导致元素⽆法正常显⽰】
2、设计⽅法：使⽤%百分⽐定义宽度，⾼度⼤都是⽤px来固定住，可以根据可视区域 (viewport) 和⽗元素的实时尺⼨进⾏调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺⼨流动范围以免过⼤或者过⼩影响阅读。
这种布局⽅式在Web前端开发的早期历史上，⽤来应对不同尺⼨的PC屏幕（那时屏幕尺⼨的差异不会太⼤），在当今的移动端开发也是常⽤布局⽅式，但缺点明显：主要的问题是如果屏幕尺度跨度太⼤，那么在相对其原始设计⽽⾔过⼩或过⼤的屏幕上不能正常显⽰。因为宽度使⽤%百分⽐定义，但是⾼度和⽂字⼤⼩等⼤都是⽤px来固定，所以在⼤屏幕的⼿机下显⽰效果会变成有些页⾯元素宽度被拉的很长，但是⾼度、⽂字⼤⼩还是和原来⼀样（即，这些东西⽆法变得“流式”），显⽰⾮常不协调。
三、⾃适应布局（Adaptive Layout）
⾃适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应⼀
个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页⾯元素位置发⽣改变），但在每个静态布局中，页⾯元素不随窗⼝⼤⼩的调整发⽣变化。可以把⾃适应布局看作是静态布局的⼀个系列。
1、布局特点：屏幕分辨率变化时，页⾯⾥⾯元素的位置会变化⽽⼤⼩不会变化。
2、设计⽅法：使⽤ @media 媒体查询给不同尺⼨和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同⼀个设备下实际还是固定的布局。
四、响应式布局（Responsive Layout）
随着CSS3出现了媒体查询技术，⼜出现了响应式设计的概念。响应式设计的⽬标是确保⼀个页⾯在所有终端上（各种尺⼨的PC、⼿机、⼿表、冰箱的Web浏览器等等）都能显⽰出令⼈满意的效果，对CSS编写者⽽⾔，在实现上不拘泥于具体⼿法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使⽤。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应⽤流式布局的理念，即页⾯元素宽度随着窗⼝调整⽽⾃动适配。即：创建多个流体式布局，分别对应⼀个屏幕分辨率范围。可以把响应式布局看作是流式布局和⾃适应布局设计理念的融合。
响应式⼏乎已经成为优秀页⾯布局的标准。
1、布局特点：每个屏幕分辨率下⾯会有⼀个布局样式，即元素位置和⼤⼩都会变。
2、设计⽅法：媒体查询+流式布局。通常使⽤ @media 媒体查询和⽹格系统 (Grid System) 配合相对布局单位进⾏布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单⼀⽹页不同设备返回不同样式的技术统称。
优点：适应pc和移动端，如果⾜够耐⼼，效果完美
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽⾼。（2）要匹配⾜够多的屏幕⼤⼩，⼯作量不⼩，设计也需要多个版本。
总结：
响应式与⾃适应的原理是相似的，都是检测设备，根据不同的设备采⽤不同的css，⽽且css都是采⽤的百分⽐的，⽽不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不⼀样的，会随着设备的改变⽽改变展⽰样式，⽽⾃适应不会，所有的设备看起来都是⼀套的模板，不过是长度或者图⽚变⼩了，不会根据设备采⽤不同的展⽰样式，流式就是采⽤了⼀些设置，当宽度⼤于多少时怎么展⽰，⼩于多少时怎么展⽰，⽽且展⽰的⽅式向⽔流⼀样，⼀部分⼀部分的加载，静态的就是采⽤固定宽度的了。
流式布局是⽤于解决类似的设备不同分辨率之间的兼容(⼀般分辨率差异较少)；响应式是⽤于解决不⽤设备之间不⽤分辨率之间的兼容问题(⼀般是指PC，平板，⼿机等设备之间较⼤的分辨率差异)。
如何实现响应式布局：，
五、弹性布局（rem/em布局）
参考：
1、rem,em区别：rem,em都是顺应不同⽹页字体⼤⼩展现⽽产⽣的。其中，em是相对其⽗元素，在实际应⽤中相对⽽⾔会带来很多不便；⽽rem是始终相对于html⼤⼩，即页⾯根元素。
2、使⽤ em 或 rem 单位进⾏相对布局，相对%百分⽐更加灵活，同时可以⽀持浏览器的字体⼤⼩调整和缩放等的正常显⽰，因为em是相对⽗级元素的原因没有得到推⼴。【中国站点制作⽹页的时候，习惯⽤CSS强制定义字体⼤⼩，保证每个⼈都看到⼀致的效果，包括⽹易、搜狐这些门户⽹站在内的⼤部分站点，⽤的都是绝对单位px（像素）。但是，如果从⽹站易⽤性⽅⾯考虑，字体⼤⼩应该是可变的，⼀些视⼒不是那么好的⼈需要放⼤字体才能看得清页⾯内容。然⽽，占据⼤部分浏览器市场的IE⽆法调整那些使⽤px作为单位的字体⼤⼩。国外⼈⼠⾮常重视⽹站的易⽤性，相当⼀部分外国站点已经使⽤em作为字体单位。】
3、这类布局的特点是，包裹⽂字的各元素的尺⼨采⽤em/rem做单位，⽽页⾯的主要划分区域的尺⼨仍使⽤百分数或px做单位（同「流式布局」或「静态/固定布局」）。早期浏览器不⽀持整个页⾯按⽐例缩放，仅⽀持⽹页内⽂字尺⼨的放⼤，这种情况下。使⽤em/rem做单位，可以使包裹⽂字的元素随着⽂字的缩放⽽缩放。
4、浏览器的默认字体⾼度⼀般为16px，即1em:16px，但是 1:16 的⽐例不⽅便计算，为了使单位em/rem更直观，CSS编写者常常将页⾯跟节点字体设为62.5%，⽐如选择⽤rem控制字体时，先需要设置根节点html的字体⼤⼩，因为浏览器默认字体⼤⼩16px*62.5%=10px。这样1rem便是10px，⽅便了计算。
Set body font-size to 62.5% for Easier em Conversion:
If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).
那么为什么⼀般多是 html{font-size:62.5%;} ⽽不是 html{font-size:10px;}呢？
因为有些浏览器默认的不是16px，或者⽤户修改了浏览器默认的字体⼤⼩（因浏览器分辨率⼤⼩，视⼒，习惯等因素）。如果我们将其设置
为10px，⼀定会影响在这些浏览器上的效果，所以最好⽤绝⼤多数⽤户默认的16作为基数 * 62.5% 得到我们需要的10px。
1.
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
2.
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
3.
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
实际项⽬设置成 font-size: 62.5%可能会出现问题，因为chrome不⽀持⼩于12px的字体，计算⼩于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。
针对这个现象，可以尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，⽽body的字体仍然是默认⼤⼩，不影响未设置⼤⼩的元素的默认字体的⼤⼩。
5、⽤em/rem定义尺⼨的另⼀个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺⼨等情况（因为em/rem相对于字体⼤⼩，会同步改变）。例如：p{ text-indent: 2em; }
6、使⽤rem单位的弹性布局在移动端也很受欢迎。
⼯具ViewtoREM：PX转换到REM（⾃动预处理）
rem的定义：font size of the root element，rem是相对于根元素<html>来设置字体⼤⼩的，这就意味着，我们只需要根据⾃⼰的需求在根元素确定⼀个参考值。
rem与em、px的区别：
px：像素，⽐较精确的单位，但不好做响应式布局
em：以⽗节点font-size⼤⼩为参考点，标准不统⼀，容易造成混乱
REM⽀持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8⽆法⽀持。
对于不同尺⼨的屏幕，可以统⼀假设屏幕宽度为640px后编写CSS（当然你也可以假定统⼀为320px）。
此时，我们设定html元素的font-size 为40px（同样，只是举例），然后各处（元素尺⼨、⽂字⼤⼩）使⽤rem作为单位，随后搭配媒体查询或JS，根据屏幕的⼤⼩来动态控制html元素的font-size（特定屏幕尺⼨下，html元素的font-size应当设置为何值，是使⽤这个⽅案时设计师和程序员需要反复考虑后确定的，以下试举⼀段相关的CSS媒体查询代码），即可⾃动改变所有⽤rem定义尺⼨的元素的⼤⼩（且CSS编写者在脑中进⾏换算的计算过程⽐em 简单得多）。
View Code
其实在移动端使⽤所谓的弹性布局，是⽐较勉强的。移动端弹性布局流⾏起来的原因归根结底是rem单位对于（根据屏幕尺⼨）调整页⾯的各元素的尺⼨、⽂字⼤⼩时⽐较好⽤。其实，使⽤vw、vh等后起之秀的单位，可以实现完美的流式布局（⾼度和⽂字⼤⼩都可以变得“流式”），弹性布局就不再必要了。详细可参考：
以下优缺点参考：（有疑问）
优点：理想状态是所有屏幕的⾼宽⽐和最初的设计⾼宽⽐⼀样，或者相差不多，完美适应。
缺点：这种rem+js只不过是宽度⾃适应，⾼度没有做到⾃适应，⼀些对⾼度，或者元素间距要求⽐较
⾼的设计，则这种布局没有太⼤的意义。如果只是宽度⾃适应，更推荐响应式设计。
响应式和弹性布局之间的对⽐：
响应式布局：改变浏览器宽度，“布局”会随之变化，不是⼀成不变的，例如导航栏在⼤屏幕下是横排，在⼩屏幕下是竖排，在超⼩屏幕下隐藏为菜单，也就是说如果有⾜够的耐⼼，在每⼀种屏幕下都应该有合理的布局，完美的效果。
rem布局：改变浏览器宽度，页⾯所有元素的⾼宽都等⽐例缩放，也就是⼤屏幕下导航是横的，⼩屏幕下还是横的只不过变⼩了。
结论：
1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对⾼度和元素间距要求不⾼，那么弹性布局（rem+js）是最好的选择，⼀份css+⼀份js调节font-size搞定；
3.如果pc，移动要兼容，⽽且要求很⾼那么响应式布局还是最好的选择，前提是设计根据不同的⾼宽做不同的设计，响应式根据媒体查询做不同的布局。
转载⾃ blog.csdn/qq_16546829/article/details/82954273

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。