viewport在移动端分为两种viewport：layoutviewportlayoutviewport：viewport的分辨率接近PC显示器，即html的宽度接近PC端的宽度。visualviewport视觉视口：手机的物理可视窗口，看到的内容没有滚动条。移动设备的viewport默认是layoutviewport，这两个可以理解。有一张宽为1090x1090的图片（layoutviewport），有一个宽为320x460的图片框（visualviewport），用户可以通过图片框查看图片。当布局视口与视觉视口完全一致时，用户透过图片框看到的是整张图片。如果布局视口很大，用户需要移动框架来查看屏幕内容。元中的视口是元中的一个值。通过设置视口，您可以控制浏览器如何以标准化方式呈现网页。要将当前视口宽度设置为理想视口宽度，可以设置width=device-width或者initial-scale=1，如果initial-scale和viewport有冲突，浏览器会取大的一个值。viewport值：namevalueDescriptionwidth正整数或device-width定义视口（layoutviewport）的宽度（以像素为单位），height为正整数或device-height定义视口的高度（以像素为单位）initial-scale[0.0-10.0]定义初始scalevalueminimum-scale[0.0-10.0]定义最小缩放比例，必须小于等于maximum-scale设置maximum-scale[0.0-10.0]定义最大缩放比例，必须大于等于minimum-scalesettinguser-scalableyes/no允许用户手动缩放页面，默认是yes称为一个像素。屏幕分辨率：指一个屏幕中屏幕水平方向的像素值*屏幕垂直方向的像素值。图像分辨率：指图像每英寸的像素数。图像分辨率的单位称为每英寸像素。设备像素：设备像素屏幕上的像素。是物理像素。设备像素可能不同，物理像素不会变化，单位是pt。1pt=1/72(inch)，英寸加英寸，1英寸等于2.54厘米例如：iphone5的像素：640*1136px，意思是：屏幕由640行1136列像素组成。CSS像素：（csspixel）CSS像素是Web编程的一个概念，指的是在CSS样式代码中使用的像素。比如？：iphone5的像素：320px。设置：当缩放为100%时，1个CSS像素等于1个设备像素设备像素的整数。对于高分辨率设备（打印机），1CSS像素是96英寸。设备像素比：DPRDPR=设备像素/CSS像素。理解：1px由多少个设备像素组成；获取方式：在手机浏览器和部分桌面浏览器中，window对象有一个devicePixelRatio属性（存在兼容性问题），其官方定义为：设备物理像素与设备独立像素的比值，即devicePixelRatio=physicalpixels/独立像素。CSS像素可以看作是设备的独立像素，所以通过devicePixelRatio可以知道一个CSS像素在设备上代表了多少个物理像素。DeviceIndependentPixels:DIPCSSPixels=DeviceIndependentPixels=LogicalPixelsPixeldensityperinch:PPI以一英寸计算像素数：varhypotenusesize=V(1920^2+1080^2)V代表根号varppi=hypotenusesize/5.5ppi=401ppiunitpx定义：css中的单位是一个抽象概念（抽象概念一定要问清楚）。大小在浏览器中以px为单位设置。视频显示的基本单位（来源：wiki）ps：px是一个相对单位，相对于设备像素。（css的像素是根据设备的分辨率计算的）。您如何看待这个相对价值？当我们缩放网页大小时，CSS像素并没有改变，但是页面上的内容变大了。这是因为CSS像素是相对的，其他因素的变化会影响CSS像素的大小。计算：为了让相同的1px在不同设备上视觉上看起来相似，css像素根据设备的像素大小进行转换。在css中，em的计算是根据参考像素进行转换的：以em为单位的元素的字体大小乘以em值，父元素的大小会影响em，因为继承，如果有一个层级嵌套，影响会更大。rem计算：取决于页面根元素的大小，将rem值乘以根元素的字体大小。RetinaRetina屏幕：Retina显示屏是指在距离人体正常距离的情况下无法在屏幕上看到的像素。为什么会出现1px问题这样的问题呢？Designer的px是指物理像素，我们设置的是CSS像素，物理像素和CSS像素不完全一样。如何解决小数.border{border:1pxsolid#999}@mediascreenand(-webkit-min-device-pixel-ratio:2){.border{border:0.5pxsolid#999}}@mediascreenand(-webkit-min-device-pixel-ratio:3){.border{border:0.333333pxsolid#999}}问题：兼容性不是很好tranformpluspseudoclasstag1pixel边框问题//less.border-1px{position:relative;&::before{content:"";位置：绝对；左：0；顶部：0；宽度：200%；边框：1px纯红色；红色;高度：200%；-webkit-transform-origin：左上；变换原点：左上；-webkit-转换：规模（0.5）；变换：比例（0.5）；*防止点击触发*/box-sizing:border-box;@mediascreenand(min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){宽度：300%;高度：300%；-webkit-转换：规模（0.33）；变换：比例（0.33）；}}}优点：其实不仅是圆角，其他边框也可以用这种方式制作缺点：代码量也大，占用伪元素添加，容易造成冲突shadows.border-1px{盒子影子w:0px0px1px0px红色插图；}
