viewport&像素
viewport是什么移动端中，分为两个视口：layout viewport 布局视口: 视口的分辨率接近于PC显示器,也就是html的宽度接近于pc端的宽度。visual viewport 视觉视口: 手机的物理可视窗口,不借助滚动条所看到的内容。移动设备的viewport默认是layout viewport可以这两理解，有一个图片(layout viewport)，宽度是：1090 1090，有一个画框(visual viewport)，宽度是：320 460，用户通过画框来看画。当layout viewport与visual viewport完全一致时，用户通过画框看到的就是整个画。如果layout viewport较大，用户需要通过移动画框来查看画面内容。meta中的viewportviewport是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值:namevalueDescriptionwidth正整数或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-scalableyes/no允许用户手动缩放页面，默认是yes分辨率&像素以上所说的宽度，其实是分辨率什么是分辨率像素：每张图片都是由色点组成的，每个色点称为一个像素。屏幕分辨率：是指一块屏幕中画面水平方向的像素值 * 画面垂直方向的像素值。图像分辨率: 是指每英寸图像内的像素点数。图像分辨率是有单位的，叫 像素每英寸。设备像素：device pixel屏幕上的像素。是物理像素。 设备像素可能不相同物理像素不会改变，单位是pt。1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米 举个???? ： iphone5的像素：6401136px， 表示：屏幕由640行，1136列像素组成。CSS像素：(css pixel)CSS像素是Web编程的概念，指的是CSS样式代码中使用的像素。举个???? ：iphone5的像素：320px。 设置：zoom 100%的情况下,1个CSS像素才会等于1个设备像素如何计算css像素对于低分辨率设备（绝大部分显示器，手机屏幕），1个css像素相当于最接近参考像素的整数个设备像素。对于高分辨率设备(打印机)来说，1个css像素就是96分之一英寸。设备像素比：DPRDPR = 设备像素/CSS像素。理解：1px由多少个设备像素组成；如何获取：在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性(有兼容问题)，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。CSS像素就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。设备独立像素：DIPCSS像素 =设备独立像素 = 逻辑像素每英寸像素密度：PPI一英寸中，像素个数计算：var 斜边尺寸 = V(1920^2+1080^2) V代表开根号 var ppi = 斜边尺寸/5.5 ppi = 401ppi单位px定义：css中的单位，是一个抽象概念(抽象概念一定要清楚上下问)。浏览器中都是按照px来设置尺寸。为视频显示的基本单位(来源：wiki)ps: px是一个相对单位，相对设备像素的。（css的像素是根据设备的分辨率计算出来的）。如何感受这个相对值呢？当我们缩放网页大小的时候，并没有改变css像素，但是页面中内容变大了，这是因为css像素是相对的，其他因素的改变，影响了css像素的大小。计算： 为了让相同的1px在不同的设备上，视觉上看起来差不多，css像素是根据设备像素大小换算出来的。css中，根据参考像素进行换算em计算：使用em单位的元素的字体大小乘以em值，父元素大小会影响em，是因为继承的原因,如果出现层级em嵌套，会影响比较大。rem计算：取决于页面根元素大小，根据根元素字体大小乘以rem值。retina视网屏幕：Retina显示器指的是在人体正常使用距离下，无法看到屏幕的像素。1px问题为什么会有这种问题？设计师的px指的是物理像素，我们设置的是css像素，物理像素和css像素不是完全一致的。如何解决小数.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 } }问题：兼容性不是很好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); }}}优点: 其实不止是圆角, 其他的边框也可以这样做出来缺点: 代码量也很大, 占据了伪元素, 容易引起冲突阴影.border-1px{box-shadow: 0px 0px 1px 0px red inset;} ...