1。基本概念屏幕尺寸：对角线的长度（cm）屏幕分辨率：水平和垂直方向的物理像素数（physicalpixels）屏幕密度：每英寸物理像素数viewportsize：css像素数水平和垂直方向表示（css像素）2.4个像素，3个视口，2个操作，1个比例，4个像素：物理像素分辨率是屏幕图像的最小单位。物理像素实际占用的屏幕尺寸在不同的设备上是不同的。设备出厂时，设备所包含的物理像素数量和一个物理像素实际占用的屏幕尺寸不会发生变化。CSS像素是web开发的一个css像素，读者使用的最小单位，最终会转化为物理像素出现在屏幕上。一个css像素占用多少个物理像素，跟谁有关系？屏幕的特性用户的缩放行为不考虑用户的缩放1.无视口：这个屏幕在水平方向（水平分辨率）占据了多少物理像素屏幕在水平方向（水平分辨率）占据了多少CSS像素visualviewportsize)2.Withviewport:pixelratio==一个方向占用的物理像素数/一个方向占用的css像素数根据屏幕的特点考虑用户缩放：放大：css像素占用更多物理像素减少：css像素占用更少的物理像素。设备独立像素是设备和css像素之间的接口。一旦把css像素和独立像素hook起来（width=device-width），像素比例就可以发挥真正的作用了。当图片像素的最小单位是位图像素和物理像素时，图片可以完美清晰地显示3视口布局视口决定了页面布局视口的布局：在手机上，为了适应网站设计桌面浏览器，默认布局视口的宽度远大于屏幕的宽度。布局视口的出现极大地帮助了桌面网站向移动设备的转移。可以通过document.documentElement.clientWidth获取。在PC端，宽度为20%的单个元素的最终值取决于初始包含块的宽度，因为我们的水平布局是从初始包含块开始填充的，和移动端一样，不过我们此时应该叫它layoutviewport。.Visualviewportvisualviewport：视觉视图与说话设备屏幕一样宽，其css像素会随着用户缩放而变化。视觉视口的宽度可以通过window.innerWidth获取，但是在Android2、Opreamini和UC8中无法正确获取来判断用户能看到什么。一个css像素占用多少个物理像素与视觉视口有很大关系。确定视觉视口的实际大小（屏幕大小）。一个视觉视口中包含的物理像素数量是确定的（分辨率）一个视觉视口中包含的css像素数量是不确定的（与用户的缩放行为有关）理想视口设备的独立像素所代表的值我们从中知道分析：布局视口的默认宽度不是一个理想的宽度。对于我们的移动设备来说，最理想的情况是用户在第一次进入页面时不再需要缩放。这就是Apple和其他跟随Apple的浏览器供应商引入理想视口的原因！只有专门为移动设备开发的网站才能拥有理想的视口。并且只有当您将视口元标记添加到页面时，理想视口才会生效。
