共计 2421 个字符，预计需要花费 7 分钟才能阅读完成。
补发 18 年文章
前几天在想设施像素比的时候，忽然想到 iphone6p 的设施像素比是 3，然而设施独立像素是 414，414* 3 大于 1080 啊，就有点懵，因为始终认为都是间接用物理像素 / 独立像素的比就是设施像素比，于是就有了接下来的温习。
- 设施像素(dp)
设施像素即物理像素，晓得是设施能管制显示的最小单位，就是显示屏上一个个的像素点（以 iphone6 来说，iphone6 宽有 750 个像素点，长有 1334 个像素点）
- 屏幕尺寸
指得是屏幕对角线长度，单位是英寸，1 英寸 = 2.54 厘米。
- 屏幕分辨率
指的是手机屏幕的物理像素点数，就是纵向设施像素 横向设施像素示意，比方 iphone6 是 1334750
- 屏幕像素密度（ppi）
指的是每英寸物理像素点数量Math.sqrt(Math.pow(1334,2)+Math.pow(750,2)) / 4.7
- 设施独立像素（dip)
也能够称之为逻辑像素，这个点是给程序控制和应用的，是形象的。当初的高分辨率屏幕会用多个设施像素来显示一个设施独立像素。比方 iphone6 上宽度的 dip 是 375，iphone6+ 是414(规范模式)’，window.screen.width可取
- 设施像素比(dpr)
指的是设施像素和设施独立像素的比例。通常状况之间用设施分辨率的宽除以设施逻辑宽就能够。比方 iphone6 就是 750/375 = 2。在程序中能够通过 window.devicePixelRatio 来获取。
少数状况下，咱们的图片都是以 dpr2 来设置的，也就是说，理论状况下，iphoneX 下显示的图片会有稍微的含糊。然而专门去适配的很少，因为都是网络上传的图片。
如果后盾反对的话，能够用 srcset 来做到。只须要提供图片资源、以及断点，其余都交给浏览器智能解决，浏览器会主动依据场景匹配最佳显示图片
<img src="128px.jpg"
srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
sizes="(max-width: 360px) calc(100vw - 20px), 128px">挪动端完满反对，就算安卓 4.3、4.4 不反对也能够用默认的 src
如果是本地的话，还有一个相熟 image-set 能够用，就是不反对安卓 4.3
div {background-image: image-set( url(test.png) 1x, url(test-2x.png) 2x );
}所以原生端的状况，都会应用 @2x,@3x 的图来匹配对应的设施。
- viewport
viewport 是一块区域，浏览器依据这个区域来计算宽度是百分比的元素的宽度。描述图案。
一般来说 PC 端端 viewport 跟浏览器的大小是统一的，挪动端的 viewport 宽度大多都是 980px，可见挪动端的 viewport 比实在的挪动端屏幕大多了。window.innerWidth
所以，咱们写代码的时候，在 h5 页面根本都会加上 meta 标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>能够看到 name=viewport，就是用于管制页面缩放的
然而咱们通常看到的 meta 标签并不止一个，那么 meta 标签有什么作用呢？
meta 标签是 HTML 标记 HEAD 区的一个要害标签，提供文档字符集、应用语言、作者等根本信息，以及对关键词和网页等级的设定等，最大的作用是可能做搜索引擎优化（SEO）。
平时应用最多的莫过于 descriptopn 和 keywords 了，用于搜索引擎搜寻的
既然不同的手机，它们的设施独立像素并不一样，那么如果我在 iphone6p 上应用宽度 200px 的 div 在 iphone6p 上还只是占屏幕的一半不到，到了 iphone4 上就会立马超过一半了。
这个时候，rem 就派上用场了。
- rem（font size of the root element）
即依据根元素的 font-size 来设置字体的大小。跟 px 一样，它是 CSS 中的一个款式单位，会依据根元素的 font-size 值来转换成 px 单位，公式为：px = rem * html(font-size)
那么，如何去抉择一个基准来设置根元素的 font-size 呢？
抉择 iphone 手机应用分辨率最广的手机来设置，跟着设计师走
5 年前，设计师还是以 iphone4 的基准来设置 640
当初，设计师曾经依照 iphone6 的基准来设置 750
那么，算法就很容易了
device-width / 750 * 100
以 iphone6 为例，2 倍的 dpr。375 / 750 * 100 = 50px；
这样的话，设计稿下面 24px，就间接写 0.24rem; 0.24*50 = 12px 理论渲染。
这样的话，如果页面超过 750px 了，就会呈现超过 PC 大小的像素，所以就须要判断一下当 deviceWidth 大于 750px 时咱们不应该再扭转根元素的 font-size 值
(function(window) {function refreshRem() {
var docEl = document.documentElement;
var screenWidth = docEl.getBoundingClientRect().width;
var rem = Math.min(screenWidth, 750) * 100 / 750;
docEl.style.fontSize = rem + 'px';
}
refreshRem();
window.addEventListener('resize', function() {clearTimeout(time);
time = setTimeout(refreshRem, 300);
}, false);
})(window);
$vm_base: 750;
@function vw($px) {@return ($px / $vm_base) * 100vw;
}
