1.兼容不同尺寸屏幕适配问题
（1）首先页面布局采用rem单位。
（2）通过在根节点html中设置font-size为px为单位来影响rem的实际大小。由于rem是根据根节点的大小来显示。
例如：
html
{font-size:16px;}
h1
{font-size:1rem;}
1234
2.理解dpr
（1）物理像素
一个物理像素是显示器（手机屏幕）上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
（2）设备独立像素（逻辑像素）
设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素（如：CSS像素），有时我们也说成是逻辑像素。
（3）设备像素比
设备像素比（简称dpr）定义了物理像素和设备独立像素的对应关系。
设备像素比=物理像素/逻辑像素(px)
注：在某一方向上，x方向或y方向
例如：
iphone6的dpr为2，物理像素750(x轴)，则它的逻辑像素为375，也就是说，一个逻辑像素在x轴和y轴方向，需要2个物理像素来显示，如下图：
问题：为什么以iPhone6为标准的设计稿的尺寸是以750px宽度来设计的呢？
iPhone6的满屏宽度是375px（Viewport’s device-width (in CSS pixels)：375px），而iPhone6采用的视网膜屏的物理像素是满屏宽度的2倍，并且设计师所用的PS设计软件分辨率和像素关系是1:1。所以为了做出的清晰的页面，设计师一般给出750px的设计图，我们再根据需求对元素的尺寸设计和压缩。
3.理解PPI
PPI指屏幕的像素密度。屏幕每英寸的像素数量，即单位英寸内的像素密度。
PPI全称Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。
例如：在1英寸单位面积内拥有的像素越多，密度越大，PPI值就越高，但像素密度的实际意义是什么呢？它表达的是什么？或高或低对设备显示来说有什么影响？
一般来说，我们当然希望PPI值越高越好，因为更高的PPI意味着在同一实际尺寸的物理屏幕上能容纳更多的像素，能够展现更多的画面细节，也就意味着更平滑的画面。
4.理解DPI
dpi表示每英寸像素数，也叫做屏幕密度，这个值越大，屏幕就越清晰，如120dpi,160dpi等，如：(320240)分辨率的屏幕物理尺寸是(2英寸1.5英寸)，dpi=160
DPI表示打印机每英寸可以喷的墨汁点（印刷行业）
dpi计算：
如果一个手机分辨率是800*480，大小是3.7，求它的dpi是多少？
先通过长和宽得出斜角线的长度是933,
dip=933/3.7得出dpi的值是252
5.viewport
一个常用的针对移动网页的viewport meta标签：
<meta name="viewport" content="width=device-width",initial-scale=1.0">
1
注释：
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
————————————————
版权声明：本文为CSDN博主「罗会」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42238554/article/details/89307226
|
|
收藏
淘帖
踩
