移动端适配解决方案

rem

rem基本知识

• rem是一个单位
• 与px不同，rem是一个相对单位，相对于HTML标签字号的单位
• 1rem = 1HTML字号大小

如何根据不同设备的屏幕、分辨率，设置不同的HTML标签字号？

使用媒体查询设置差异化CSS样式

为什么使用媒体查询：媒体查询能够检测视口的宽度，既然检测到了视口不同的宽度，那么我们就可以根据不同的视口宽度设置不同的HTML字号大小了。
媒体查询语法：

@media(媒体特性){CSS样式选择器{CSS属性}}

其中媒体特是指设备尺寸大小
案例：

    /*
      这段代码的含义是：
      当视口宽度大于等于 640px 且 高度大于等于 720px，body 的背景色为蓝色
    */
@media only screen and (min-width: 640px) and (min-height: 720px) {
      html{
        font-size: 12px;
      }

在rem基本知识点的时候已经标红了一个重点知识，那就试1rem = 1HTML字号大小，那么如果我将在不同屏幕分辨率的情况下设置不同的HTML根节点大小，是不是就能实现==屏幕宽度不同，网页元素尺寸不同（等比缩放）==了呢？聪明的你肯定很快将个中关系梳理清楚的了。

设备不同，HTML标签字号设置多少合适？

现在你已经掌握了根据屏幕宽度不同，设置不同网页元素尺寸了，那么我们怎么确定在不同屏幕下设置多大的HTML字号大小比较合适呢？不必担心，前辈已经给我们实践出真知了，请牢记：目前rem布局方案中，将为网页分成10份，HTML标签的字号为视口宽度的1/10。

如何将设计稿中的px转化成rem单位？

• 确定设计稿对应的设备的HTML标签字号
  查看设计稿宽度–》确定参考设备宽度（视口宽度）–》确定基准根字号（1/10视口宽度）

• rem单位的尺寸
  rem单位的尺寸 = px单位数值 / 基准根字号
  案例：计算68px是多少个rem？（假定设计稿适配375px视口）
  解答：设N为rem： N * 37.5 = 68px ------> N = 68px / 37.5

使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比例缩放效果

为什么使用flexible.js?

假定场景，市面上的手机型号如此之多，屏幕大小分辨率也不一样，那么我们在使用rem做移动端适配的时候势必要写多条的媒体查询来适配不同设备下的HTML字号大小，试问：如此冗余的代码怎能存在。

• flexible.js是手机淘宝开发出来的用来适配移动端的js框架；
• flexible.js能做到根据不同的视口宽度给网页中的HTML根节点设置不同的font-size。
  在使用时我们只需要把flexible.js下载到本地，并且引入到代码中，即可将设置基准根字号的CSS全部取代。

Viewport Width、Viewport Height

VW/VH基本知识

• 相对单位
• 相对视口的尺寸计算结果
• vw：viewport width 1vw = 1/100视口宽度
• vh：viewport height 1vh = 1/100视口高度

如何根据设计稿中的px转化成vw单位

• 确定vw尺寸
  查看设计稿宽度-》确定参考设备宽度（视口宽度）-》确定vw尺寸（1/100视口宽度）
• vw单位的尺寸 = px单位数值 /（1/100视口宽度）
  案例：计算68px是多少个vw？（假定设计稿适配375px视口）
  解答：设N为vw：N * 3.75 = 68px ------> N = 68px / 3.75
  注意：vw、vh在同一屏幕大小分辨下转化成px长度是一样的，也就是说你使用vw或者vh作为单位都可以，但是值得注意的是不可混用vw、vh，例如

看完上面基于rem和vw、vh的讲解，不知道你对移动端适配是不是有了基本掌握呢？