【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. 总结

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

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

八、移动端各状况下适配方案：

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

（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