移动端适配知识点

前言

大大小小做了十几个pc项目，感觉自己上可九天揽月，下可五洋捉鳖能得不行，但是仔细想一下在一个公司业务做的很6，好像并没有什么值得骄傲的，因为不同公司业务方向不同，其实还有很多都没有实战过的知识点，比如移动端，前端缓存，前端性能测试等一系列的东西，毕竟前端的丰富多样，总能给你不一样得惊喜，要学得还有很多，切不可骄傲自满……

移动端适配初探

• 对前端有点了解得都只知道自从iphone6 ,6+的出现和Android屏幕的百花齐放，移动端适配全面进入到“杂屏”时代。

• 之前也有了解过适配的值是但是没有实战过，网上也看了很多帖子，总结了一下现在的适配方案主要有三种
  rem适配，vw适配, vw + rem适配，对于那个更好也一直是嘴炮不断，纠结了一下还是选择了rem作为入门，如果要给一个理由的话---出现时间长，经过不断的完善，是比较成熟的适配方案

• flexible.js淘宝一直在用的rem方案，直接拿来用方便快捷

关于rem适配原理的讲解

最初接触rem适配是在慕课网上 吕小鸣老师的rem适配秘籍，虽然讲的比较初级，讲真的听完之后还是很迷

可能也跟当时基础较差有关，不懂什么是媒体查询（听名字感觉很高大上），不懂什么是sass,现在回头看的时候感觉当时自己是真的菜

进入正题---记得老师举了一个例子以iphone6,7,8为例（375 * 667），ui给的2倍稿 750 * 1334，然后老师给了一个如下的scss函数

//scss
@function px2rem($px){
  $rem: 37.5px;
  @return ($px / $rem) + rem
}

//获取视窗宽度
let htmlWidth = document.documentElement.clientWidth || document.body.scrollWidth;
console.log(htmlWidth);

//获取视窗高度
let htmlDom = document.getElementsByTagName('html')[0];
//根据当前手机宽度设置字体大小
htmlDom.style.fontSize = htmlWidth / 10 + 'px';

当时看完之后楞是没有转过弯，为什么我把$rem定死成37.5px,如果是这样那么不管如何改变手机尺寸，px2rem函数返回得都是固定的值，那么这么写的意义在哪里???
直到再次看的时候才反应过来，返回相同的rem值有问题吗？？？ 那当然是没有问题的---只要根元素字号的px不同，宽度自然是不同的

举个例子，有一个div的设计稿宽度是100px,通过上面的px2rem返回的都是固定的值2.66667rem,这又如何能达到适配？？？

这次回头看视频，把视频讲的东西串起来，才恍然大悟，上面的第二部分代码就是动态的设置根字体的大小，而 1rem = html根字体的大小，不同大小的屏幕根字体的大小不一样，可不就达到适配的要求了吗

再讲一些大佬们都已经讲烂了的知识点

• 物理像素(physical pixel)
  物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。
  iphone 6,7,8就是 750*1334
• 设备独立像素(density-independent pixel)
  设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。
  iphone 6,7,8就是 375 * 667
• 设备像素比(device pixel ratio)
  设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：

设备像素比 ＝ 物理像素 / 设备独立像素

• retina
  指显示屏的分辨率极高，使得肉眼无法分辨单个像素，高清屏比如dpr为2的retina屏，1个设备独立像素这个时候就相当于四个物理像素，会使画面更清晰，所以苹果就起了一个很骚气的名字‘视网膜’
  在没有retina之前，物理像素和设备独立像素是一样得
  借大佬图一用

image.png

实战 vue + elementui + flexible.js

• 把网上的flexible.js拷下来
• main.js 引入 import './flexible.js'
• 新建common.scss文件

//px 转成 rem
@function px2rem($px){
  $rem: 37.5px;
  @return ($px / $rem) + rem
}

//混合宏设置字体
@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

• 然后就是新建vue组件开始撸

![传送门] （https://github.com/yourdear/mobile-first）