补发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;}