真的了解移动端适配吗 ？


目前，随着 Web 技术的革新，移动端适配方案也在不断的变化，网上也有很多关于移动端适配的一些常见的方法。但是任何适配方案都有它自己的优缺点，要结合自己的使用场景去进行选择，达到最好的效果。

前置知识 ：对于 em 的认识

em 概念 ：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

em 特点 ： 它的值并不是固定的，它会继承父级元素的字体大小。

注意 ：任意浏览器的默认字体高都是 16px ,所有未经调整的浏览器都符合 1em = 16px.

移动端适配方案 ：

  • vw / vh 方案 ：

视口是浏览器中用于呈现网页的区域，也就是用户所能看到的页面区域。

1vw,等于视口宽度的1%；1vh,等于视口高度的1%

vmin,选取vw和vh中最小的那个值；vmax,选取vm和vh中最大的那个值。

使用的时候，所有的px单位除以100，也可以通过css预处理器将px单位转换为vw

vw / wh 方案优缺点

优点 ：纯 CSS 移动端适配方案，不存在脚本依赖的问题。根据视口宽度的百分比来定义元素的宽度，计算方便。

缺点 ：存在兼容性问题，只在移动端 iOS 8 以上以及 Android 4.4 以上获得支持；

  • rem 方案 ：

rem 简介 ：它是 CSS3 新增的一个相对单位（根元素）。这个单位与em的区别在于rem相对的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

rem 方案的原理 ： rem 是相对长度单位，相对 html 元素计算值的倍数。根据屏幕宽度设置 html 标签的 font-size,在布局时使用 rem 单位，达到自适应的目的，这是弹性布局的一种实现方式。

1
2
3
4
5
6
7
8
// 设计稿宽度
var designWidth = 375;
// 在屏幕宽度375px，的时候，设置根元素字体大小 100px        
var remPx = 100;
//计算当前屏幕的宽度与设计稿比例              
var scale = window.innerWidth / designWidth；
// 根据屏幕宽度 动态计算根元素的 字体大小
document.documentElement.style.fontSize = scale*remPx + 'px';

rem 方案优点 ：自适应效果好；兼容性好，除了IE8及更早版本外，所有浏览器均已支持rem。

rem 方案缺点 ：

  • 不是纯css移动适配方案，需要引入js脚本，监听浏览器窗口缩放行为动态改变根元素的字体大小。css样式和js代码有一定耦合性，并且必须将改变 font-size 的代码放在css样式之前。
  • 小数像素问题，浏览器渲染最小的单位是像素，元素根据屏幕宽度自适应，通过 rem 计算后可能会出现小数像素，浏览器会对这部分小数四舍五入，按照整数渲染。
  • Android 浏览器下 line-height 垂直居中偏离的问题。常用的垂直居中方式就是使用line-height，这种方法在Android设备下并不能完全居中。
  • cursor: pointer 元素点击背景变色的问题，对添加了cursor:pointer属性的元素，在移动端点击时，背景会高亮。为元素添加tag-highlight-color:transparent属性可以隐藏背景高亮

  • rem + vm 方案 :

vw / vh方案计算方便，能够很好地实现适配效果，但是存在一定的兼容问题，将 vw/vh 方案和 rem方案相结合，设置html元素的font-size单位为vw，然后在布局中直接使用 rem 单位。这样的好处是不需要使用postcss-pxtorem 插件来转换单位，如果使用插件，想写px的地方还需要设置propList或者selectorBlackList。使用这种方案的话就不存在这个问题了，想用相对单位就写rem，想用绝对单位就写px，不需要其他的设置。

方案优缺点 ：

优点 ：从rem方案过渡到vw，只是需要通过改变根元素字体大小的计算方式，将单位改成vw，不需要其他处理。

缺点 ：这种方案只对手机的兼容性很好，ipad或者是pc端的效果就不是很好。因为根节点的字体单位使用的是vw，当设备的宽度越来越大时，使用rem做单位的元素也会越来越大，以至于在ipad或者是pc上展示的效果会很差。

缺点 解决方案 ：当屏幕过大的时候，我们可以使用媒体查询来限制根元素的字体大小，实现对页面的最大最小宽度限制。

  • 百分比方案 ：

相对于父元素的宽度，使用百分比的单位来定义子元素的宽度。子元素的高度使用px来定义，使用max-width/min-width 控制子元素的最大最小尺寸。

height/width：相对于子元素的直接父元素；top/bottom/left/right：相对于有定位属性的父元素；padding/margin：相对于直接父元素；border-radius：相对于自身。

方案优缺点 ：

优点 ：原理简单，不存在兼容性问题。

缺点 ：字体大小无法随着屏幕大小变化而改变；设置盒模型的不同属性时，其百分比设置的参考元素不唯一，容易使布局问题变得复杂。

  • 媒体查询（media）的响应式方案 ：

基于媒体查询的响应式设计，响应式设计，使得一个网站可以同时适配多种设备和多个屏幕，让网站的布局和功能随用户的使用环境（屏幕大小、输出方式、设备/浏览器）而变化，使其视觉合理，交互方式符合习惯。

css3中的@media，通过给不同分辨率的设备编写不同的样式规则实现响应式布局，使一个网站可以在不同尺寸的屏幕下显示不同的布局效果。主要用来解决不同设置不同分辨率之间的兼容问题，一般是指pc、平板、手机设备之间较大的分辨率差异。实现上不局限于具体的方案，通常是结合流式布局和弹性布局方案。

原理 ：通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度。

方案优缺点 ：

优点 ：能够使网页在不同设备、不同分辨率的屏幕上呈现合理布局，不单单是样式伸缩变换。

缺点 ：如果要匹配足够多的设备与屏幕，一个web页面需要多个设计方案，工作量比较大。通过媒体查询技术需要设置一定量的断点，到达某个断点前后的页面发生突兀变化，用户体验不太友好。

  • meta-viewport 适配方案 ：