屏幕尺寸屏幕分辨率，数值大的在前，数值小的在后。PPI和DPI是指对角线上每英寸的像素数，而不是每平方英寸的像素数。Physicalpixeldevicepixel和logicalpixeldevicepixel是物理像素：logicalpixel：这个375*667是逻辑像素devicepixel和logicalpixel不等价的情况：dpr-devicepixelratio我们在css中写windth:1px，在Iphone6上devices会占用两个发光点，表示Iphone6中的设备像素是逻辑像素的两倍。iphone6也叫2折屏，即dpr为2window.devicePixelRatioDevice独立像素-DIP视图viewport-视觉视口布局viewport-layoutViewport测试代码：结果：选中box标签，发现其宽度为980pxdocument.documentElement.clientWidthmeta视口标签只对手机浏览器有效，对PC浏览器无效。测试代码：结果：选中框标签，发现其宽度为450pxWindow10系统，如果设置了缩放，例如选择200%缩放，在上例中选中框标签，发现其宽度将为225像素。当设置width=450的时候，有水平滚动条：修改为width=device-width:结果：选中框标签，发现其宽度为414px，与iphone8plus的逻辑像素一致测试代码：结果：Iphone8的375px的盒子可以放640px的长度标签是因为放大了0.5倍：idealviewport-idealviewport只能通过设置initial-scale才能达到效果，因为浏览器会自动计算width的值:layoutviewportwidth=deviceidealviewportwidth/initial-scale当不设置width属性时，浏览器会将布局视口宽度设置为视觉视口宽度，让页面正好填满屏幕。它可以被认为是一种法律。如果同时设置了initial-scale和width，则取计算结果中值较大的那个。常见的写法是两个都写，而不是只写一个关于视口：移动端的适配离不开视口，下面的百分比和rem解决方案都是基于视口的，只要像素浏览器调试控制台显示的都是逻辑像素，它们是同一个单位。下面375、667、640、60、638、58都是同一个单位百分比布局方案包括两种：百分比+定高弹框（即flex布局）+定高百分比+定高案例：Rem布局方案mediaquery改变根元素的字体大小：这里的min-width指的是逻辑像素，也就是css像素，也就是下面的像素：如果设计稿用到640*2=1280px，那么min-width:640px设置为100px，方便转换。比如设计稿上一个label是120px，写成1.2remmin-width:480px下面的75px是怎么计算的：640/480==100/75==1.33现在更多的是750*1334px的设计稿，所以font-size:100px应该设置在750范围内缺点：js要动态改变根元素的字体大小。document.clientWidth是layoutviewport的宽度，即viewport中指定width的公式和前面mediaquery的数据公式一样。缺点：在2倍屏的设备上，1px的线条显示很粗，因为显示1px缩放自适应布局占用两个物理发光点。推荐两款手机适配插件：淘宝灵活解决地址：https://github.com/amfe/lib-f..hotcss地址：https://github.com/imochen/ho...hotcss使用步骤：下载zip包，解压后复制以下两个文件到工程中：Hotcss.js中的代码：px2rem中的代码：测试代码：结果：盒子无论在什么设备上，都是屏幕宽度的一半。因为hotcss平均将屏幕分成16个部分，1个部分是1remhotcss具体用法：cart.html:.html文件名中不用写
