关于移动端的适配

写在前面 本文参考了大量关于移动端适配的资料 侵删 谢谢

基础介绍

在说明移动端的适配之前我们需要理解一个重要的东西 像素！!

像素

在移动端给一个元素设置width:400px时发生了什么？这里的px到底是多长呢？像素是网页布局的基础，但是我们一直在用直觉使用它。
然而在使用的时候我们需要知道的是现实存在的情况是分为两种情况的

1. 现实实际存在的像素

现实实际存在的像素，简而言之就是设备的像素，一台mac的像素一台移动端手机的本机硬件显示屏的像素，这个值是不可能改变，是在设计的时候机已经存在的固定值。单位是pt。

2.CSS像素

CSS的像素值是一个抽象的概念的，也就是我们在前端的学习和使用中所用到的，在js和css设置中所使用的像素值概念。单位是px。
以此我们回到开始时说道的问题width:400px,这个值在具体的设备上是如何显示出来的我们就需要从两个维度综合考虑这个问题，因为这两个变量最终是决定如何显示的最后结果地方。

• 页面是否进行了缩放
• 屏幕是否是高密度的

视口属性（meta viewport）

首先我们要知道的是视口属性的出现更多的是为了优化移动端对于网页显示的美观存在的。
在mdn上关于视口属性的介绍是这样的

移动端浏览器（如Fennec）在一个通常比屏幕更宽的虚拟”窗口“（视口）中渲染页面，从而无需将所有页面都压缩进小屏幕里（那样会把很多没有针对移动端进行优化的站点打乱）。用户可以通过平移和缩放来浏览页面的不同区域。
Mobile Safari 引入了”viewport元标签“来让web开发者控制视口的尺寸及比例。如今许多其他移动端浏览器已经支持这一标签，虽然它不是任何web标准的一部分。苹果的文档
详尽地说明了web开发人员可以怎样使用这一标签，然而我们还是不得不仔细推敲Fennec究竟应该怎样实现它。例如，Safari的文档指出标签的内容应为”由逗号分隔的列表“，但是现有的浏览器和网页都把逗号、分号及空格混用作分隔符。

所以我们可以理解为：
桌面浏览器中，浏览器窗口就是约束你的CSS布局视口（又称初始包含块）。它是所有CSS百分比宽度推算的根源，它的作用是给CSS布局限制了一个最大宽度，视口的宽度和浏览器窗口宽度一致。
但是在移动端，情况就很复杂了。

• 整体优化
  因为在手机上，视口与移动端浏览器屏幕宽度不再相关联，是完全独立的，这个浏览器厂商定的视口被称为布局视口。然而布局视口我们是不知道的，一般来说网页的综合考量设置宽度为980px，并且将其放在了移动端设备的浏览器中，产生了巨大的问题。
  所以我们一般会使用完美兼容浏览器的方式使用一下代码进行优化

width属性控制视口的宽度。可以像width=600这样设为确切的像素数，或者设为device-width这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值。（相应有height及device-height属性，可能对包含基于视口高度调整大小及位置的元素的页面有用。）
initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。

• 缩放页面的情况下
  对于设置了初始或最大缩放的页面，width属性实际上变成了最小视口宽度。比如，如果你的布局需要至少500像素的宽度，那么你可以使用以下标记。当屏幕宽度大于500像素时，浏览器会扩展视口（而不是放大页面）来适应屏幕：
  
  移动浏览器在处理屏幕方向改变时稍有差异。例如，Mobile Safari通常在竖屏转横屏时只缩放页面，而不会把页面重新布局成横屏载入时的效果。如果web开发者想让iPhone在方向切换时保持固定比例，需要增加一个maximum-scale值来避免这样的的缩放，这会带来并非预期的禁止用户缩放页面的副作用：
  

媒体查询

在mdn中关于媒体查询的解释是

一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。
自我的理解是我们可以对媒体的一个类型进行限制，当我限制的条件被触发的时候我们就可以通过设置进行另外的一种样式的布局。
在移动端中因为本身的物理像素的限制，本身的物理像素较小，所以我们需要将本身在pc端很大的页面进行优化，让显示更加的巨像，这样的好处就是可以让整个页面的可读性进一步的提升，优化用户体验。
关于媒体查询的代码是

当媒体查询为true时，其对应的样式表或样式规则就会遵循正常的级联规则进行应用。即使媒体查询返回false，[](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link "The HTML element specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets.") 标签指向的样式表也将会被下载(但是它们不会被应用)
除非使用not或only操作符，否则媒体类型是可选的，默认值是all(全部).
具体的代码可以参考此链接

动态 rem 方案

rem在css中是一种长度的表示方式就如同像素px是一样的，在mdn中的具体解释是

这个单位代表根元素的
font-size 大小（例如 元素的font-size）。当用在根元素的font-size
上面时 ，它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面中1rem的大小相当于html的根字体默认大小的2倍,当然此时页面中字体的大小也是html的根字体默认大小的2倍)。

在移动端的优化中我们可以使用的是，将rem做宽度，viewport缩放

• 设置rem
  设置rem的意义在于得到一个与屏幕宽度相关的单位，本来vw是最合适的，但是因为兼容性的问题，只能使用rem来做。这样，让不同设备的rem显示一样的长度。

vw是CSS3 引入的单位，1vw = 1%窗口宽度
举例来看

例子

我们可以使用代码如下所示

html{
    font-size: 屏幕宽度 / 10; 
}
.btn{
    width:8.75rem;
    height:1.25rem;
}

这样，无论屏幕宽度是多少，.btn都是相对于屏幕的这么宽，做到了适配。

总结

关于移动端的优化我们可以确定的是，其结果是无穷尽的，但是在css的不断升级和优化之后，对于移动端优化的便利性的提升是毋庸置疑的，上文所述的三点是关于移动端优化的关键所在。