前言
大大小小做了十几个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组件开始撸
网友评论