【HTML&CSS&JS移动端适配】移动端尺寸适配与响应式布局相关知识

相关技术知识图谱

百分比（流式布局）
百分比是CSS样式中很重要的一个单位，而在页面布局的层面上，在很多地方对百分比进行了应用。由于用户使用习惯是从上到下浏览，一般性质的百分比布局通常是宽度自适应，高度不设置，默认为auto。

• 盒子布局宽高百分比
  • 单位为%，基数为浏览器可是区域宽度。

• 节点对象宽高百分比

  • 文字节点百分比
    • 字体大小百分比
      • 单位为%，基数为父容器文字大小。
  • 元素节点百分比
    • 媒体文件的响应式适配
      • 单位为%，基数为父容器大小。
    • HTML元素的背景适配
      • 单位为%，基数为所在于元素大小。
      • 特殊的参数值：
        • cover：在保持长宽比的前提下，完全覆盖背景区域，可能有一部分会显示不全。
        • contain：在保持长宽比的前提下，适应背景区域，使图片在显示完整的前提下最大化显示。图片会显示完整。但背景区域的一侧可能会留白。
• 目前趋势：衰落。

• 目前恰当使用场景：需宽（或者：宽+高）全屏的地方。例如，背景平铺/纯色、蒙层、导航条宽度，其他全屏；

rem+mediaquery/js
rem是CSS3新增的相对长度单位。作为相对长度单位，它只跟随HTML根元素的字体大小变化，不受任何非HTML根元素的父元素大小影响。这使得它集相对长度单位和绝对长度单位优点于一身。想改变使用rem的元素或者文字节点的大小，只需改变HTML根元素的文字大小即可。

• 兼容性问题
  • 兼容问题：浏览器IE8及更早版本不支持。所以移动端支持较好，PC端支持稍差。

  • 兼容代码写法：需写一个绝对大小声明，不支持rem的浏览器会自动忽略rem。

    p {font-size:14px; font-size:.875rem;}

• rem + 媒体查询
  • 特点：非连续性的等比缩放；
  • 媒体查询可用于可枚举的关键值下的尺寸和布局变更。而rem用于尺寸的变更。所以rem+媒体查询可用于简单的非连续性的可等比缩放的尺寸适配。
• rem + js
  • 特点：连续性的等比缩放；
  • js+rem可一并实现多设备的等比缩放，缩放具有连续性，不用去枚举设备尺寸；
  • 缺点：总是需要计算（%不需要）；
  • 优点：可以等比例缩放（%不可以）；

  • 代码示例：

    未完

• 目前趋势：流行。
• 目前恰当的使用场景：需以高宽等比例变化去适配移动页面的元素；

媒体查询

• 媒体查询使用关键尺寸查询来为这些对应尺寸设置样式（尺寸+布局）
• 详见 CSS媒体查询
• 目前趋势：平稳。
• 目前恰当使用场景：响应式布局；

viewport+px+……

• viewport仅用于对页面中以px为单位的尺寸大小的缩小和放大，以抛开设备物理像素，以更舒适的像素去显示；
• viewport使用在几乎任何移动页面上，但它只能控制px的舒适度，而不能使元素宽度在任何设备下都充满屏幕（因为它只能让1px在手机上有更合适的大小，但是每个手机的宽度不一样，宽的就不能充满）。所以viewport通常智能处理px的部分，还需配合相对长度单位去做元素等比缩放的适配。
• 获取比值：window.devicePixelRatio；
• 获取ideal viewport：document.documentElement.clientWidth；
• 详见 viewport详解
• 目前趋势：平稳。
• 目前恰当的使用场景： 同一元素在大小屏幕上大小一致，占比不同的现实需求。例如文字大小。

相关框架

• boosttrap、妹子UI栅格布局。

技术对比与总结

A. 移动页面尺寸缩放与适配的技术

技术名称	描 述	依赖尺寸单位	依赖基数	需要配合屏幕尺寸捕捉	适应设备独立像素	不受父元素大小影响	浏览器等比缩放（用于块元素）	还原设计图	用于字体
流式布局	根据父元素百分比	%	父元素尺寸	不需要（局限）	不支持	不支持	不支持长宽比例不变	差	不舒适
vw/vh	根据屏幕百分比	vw/vh	屏幕宽度	不需要	不支持	支持	支持，无需计算	需要换算	不舒适
rem	根据根字体大小	rem	根字体大小（px/vw/em）	需要	不支持	支持	支持，需要计算	需要换算	不舒适
px	定死大小	px	devicePixelRatio	需要	不支持	支持	不支持	直接使用	舒适
em	根据父元素字体大小	em	父元素字体大小（px/vw/em）	需要	不支持	不支持	不支持	需要换算	不舒适

B. 移动屏幕尺寸捕捉与响应式布局的技术

技术名称	描述	可调整尺寸范围	是否可调整局部	尺寸捕捉方法	设备独立像素	适配所有尺寸设备	响应式布局
viewport	优化px	仅px	不可以	viewport的width&initial-scale属性	适应（操作简单）	完美支持	不支持
媒体查询	改变布局 特定尺寸设置	全部	可以	@media screen and (max-width){} @import url(example.css) screen and (min-width:800px);	可适应（需特殊参数）	不支持	支持（简单/全面）
js	通过计算 可改变尺寸&布局 可连续变尺寸	全部	可以	document.documentElement.clientWidth window.devicePixelRatio	适应（操作复杂）	完美支持	支持（复杂/全面）
模板引擎	JS用来改变布局	不用来调整尺寸	可以（布局）	使用JS	使用JS	使用JS	支持（简单/局限）

C. 总结

1、rem为现在比较流行的适配方案，与它优点类似的有vw。它们都是CSS3中新出现的相对长度单位，vw还有配套系列例如vh等。这两种单位，都集绝对长度单位和相对长度单位优点于一身，可相对一个统一的标准变化。它们都可配合js进行等比变化，函数性变化或者媒体查询变化等多种基准灵活变化（同一根值点，使用rem/vw的不同元素仅可对应其中一种变化，不可对它们进行区别设置。【除非用js去修改CSS中选中的个别元素的值。】），vw相对rem的优点是：若进行基于屏幕宽度的等比变化，vw不用配合js即可使用）；
2、vw的致命缺点：兼容性相较rem低很多，浏览器支持性差；
3、viewport对于所有使用过哪怕一次px做单位的移动页面都必要；
4、mediaquery属于CSS3的新增功能，可完全用js替代。优点是简单方便，不用写JS。缺点是不能进行连续性的查询，只能枚举查询关键值；
5、JS可配合rem/vw/%/em等相对单位进行连续性的查询和适配，也可以模拟媒体查询做关键值查询和适配；
6、移动端字体使用px+关键值查询（mediaquery/js两种方式）最优；
7、移动端适配方案应综合使用各种技术：

（1）%多用在不考虑等比缩放而考虑完全适应屏幕的地方，适合个别局部使用。比如活动页面背景；
（2）rem一般用于等比缩放，适合大范围局部使用（个人认为，vw解决兼容性问题后可完全代替rem）；
（3）px一般用于字体。与适配的思路相反，px多用于大小屏占比需区分的地方，所以px一般不随应配页面变化（仅使用viewport适配到不同手机的独立像素，或是使用媒体查询做几个关键值）；
（4）viewport依然用在所有要用到px的移动端页面；
（5）页面元素尺寸变化使用js最佳，仅考虑适配屏幕而非等比缩放的地方可直接使用%；
（6）布局变化一般使用媒体查询，也可以用模板引擎；

8、移动端各情况下适配方案：

• 适配主要从字体大小、元素尺寸、布局安排、独立像素比这几个方面考虑；

（1）字体变化：px+媒体查询；
（2）尺寸变化：

• 需等比缩放的元素：rem+js；
• 需宽（或者：宽+高）全屏。例如纯色/平铺背景图或者蒙层：%；
  　

（3）布局变化（响应式布局）：媒体查询；
（4）独立像素比变化（任何移动端页面）：viewport；

参考资料

【1】移动端布局之rem https://isux.tencent.com/web-app-rem.html
【2】viewport详解 http://www.cnblogs.com/2050/p/3877280.html
【3】media横竖屏适配问题 http://www.genshuixue.com/i-cxy/p/8016190