viewport&像素

viewport是什么

移动端中，分为两个视口：

1. layout viewport 布局视口: 视口的分辨率接近于PC显示器,也就是html的宽度接近于pc端的宽度。
2. visual viewport 视觉视口: 手机的物理可视窗口,不借助滚动条所看到的内容。

移动设备的viewport默认是layout viewport
可以这两理解，有一个图片(layout viewport)，宽度是：1090 1090，有一个画框(visual viewport)，宽度是：320 460，用户通过画框来看画。当layout viewport与visual viewport完全一致时，用户通过画框看到的就是整个画。如果layout viewport较大，用户需要通过移动画框来查看画面内容。

meta中的viewport

viewport是meta中的一个值，通过设置viewport，可以控制浏览器如何规范的渲染Web页面

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，如果initial-scale和viewport有冲突，浏览器会取比较大的值。

viewport值:

name	value	Description
width	正整数或device-width	定义视口(layout viewport)的宽度，单位为像素,
height	正整数或device-height	定义视口的高度，单位为像素
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable	yes/no	允许用户手动缩放页面，默认是yes

分辨率&像素

以上所说的宽度，其实是分辨率

什么是分辨率

1. 像素：每张图片都是由色点组成的，每个色点称为一个像素。
2. 屏幕分辨率：是指一块屏幕中画面水平方向的像素值 * 画面垂直方向的像素值。
3. 图像分辨率: 是指每英寸图像内的像素点数。图像分辨率是有单位的，叫 像素每英寸。

设备像素：device pixel

屏幕上的像素。是物理像素。 设备像素可能不相同

物理像素不会改变，单位是pt。

1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米

举个? ： iphone5的像素：640*1136px， 表示：屏幕由640行，1136列像素组成。

CSS像素：(css pixel)

CSS像素是Web编程的概念，指的是CSS样式代码中使用的像素。

举个? ：iphone5的像素：320px。

设置：zoom 100%的情况下,1个CSS像素才会等于1个设备像素

如何计算css像素

1. 对于低分辨率设备（绝大部分显示器，手机屏幕），1个css像素相当于最接近参考像素的整数个设备像素。
2. 对于高分辨率设备(打印机)来说，1个css像素就是96分之一英寸。

设备像素比：DPR

DPR = 设备像素/CSS像素。
理解：1px由多少个设备像素组成；
如何获取：
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性(有兼容问题)，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。
CSS像素就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。

设备独立像素：DIP

CSS像素 =设备独立像素 = 逻辑像素

每英寸像素密度：PPI

一英寸中，像素个数
计算：

var 斜边尺寸 = V(1920^2+1080^2) V代表开根号 
var ppi = 斜边尺寸/5.5 
ppi = 401ppi

单位

px

定义：

1. css中的单位，是一个抽象概念(抽象概念一定要清楚上下问)。浏览器中都是按照px来设置尺寸。
2. 为视频显示的基本单位(来源：wiki)

ps: px是一个相对单位，相对设备像素的。（css的像素是根据设备的分辨率计算出来的）。如何感受这个相对值呢？当我们缩放网页大小的时候，并没有改变css像素，但是页面中内容变大了，这是因为css像素是相对的，其他因素的改变，影响了css像素的大小。

计算：
为了让相同的1px在不同的设备上，视觉上看起来差不多，css像素是根据设备像素大小换算出来的。css中，根据参考像素进行换算

em

计算：使用em单位的元素的字体大小乘以em值，父元素大小会影响em，是因为继承的原因,如果出现层级em嵌套，会影响比较大。

rem

计算：取决于页面根元素大小，根据根元素字体大小乘以rem值。

retina视网屏幕：Retina显示器指的是在人体正常使用距离下，无法看到屏幕的像素。

1px问题

为什么会有这种问题？

设计师的px指的是物理像素，我们设置的是css像素，物理像素和css像素不是完全一致的。

如何解决

1. 小数

   .border { border: 1px solid #999 }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        .border { border: 0.5px solid #999 }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        .border { border: 0.333333px solid #999 }
    }

   问题：兼容性不是很好

2. tranform加伪类标签

   <span class="border-1px">1像素边框问题</span>
   // less
   .border-1px{
   position: relative;
   &::before{
       content: "";
       position: absolute;
       left: 0;
       top: 0;
       width: 200%;
       border:1px solid red;
       color: red;
       height: 200%;
       -webkit-transform-origin: left top;
       transform-origin: left top;
       -webkit-transform: scale(0.5);
       transform: scale(0.5);
       pointer-events: none; /* 防止点击触发 */
       box-sizing: border-box;
       @media screen and (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){
       width: 300%;
       height: 300%;
       -webkit-transform: scale(0.33);
       transform: scale(0.33);
       }
   }
   }

   优点: 其实不止是圆角, 其他的边框也可以这样做出来
   缺点: 代码量也很大, 占据了伪元素, 容易引起冲突

3. 阴影

   .border-1px{
   box-shadow: 0px 0px 1px 0px red inset;
   }