CSS详解：物理像素与逻辑像素的区别与联系
最编程
2024-07-27 07:37:11
...
物理分辨率和逻辑分辨率
物理分辨率是生产屏幕时就固定的，它是不可改变的 -----电脑像素
逻辑分辨率是由软件决定的 【电脑的设置中可以修改分辨率】----css像素
设备像素比
dpr=同一方向上的物理像素/css像素 （缩放比是1的情况）
假设dpr=4/2=2 【表示一个css像素是用2*2个设备像素来绘制的】
视口
浏览器的视口是一个在其中查看web内容的窗口区域，在移动设备和其他窄屏设备中，某些内容在比普通屏幕更宽的虚拟窗口或视口中渲染页面，然后缩小渲染的结果，以便可以一次看到所有内容。
使用mate标签设置视口宽度，制作适配不同设备宽度的网页
- viewport：视口
- width=device-width：视口宽度 = 设备宽度
- initial-scale=1.0：缩放1倍（不缩放）
推荐阅读
-
CSS详解：物理像素与逻辑像素的区别与联系
-
Android 开发中 nodpi、xhdpi、hdpi、mdpi、ldpi 的概念 - 术语和概念 屏幕尺寸 屏幕的物理尺寸，基于屏幕的对角线长度（如 2.8 英寸、3.5 英寸）。 简而言之，安卓系统将所有屏幕尺寸简化为三大类：大、普通和小。 程序可以为这三种屏幕尺寸提供三种不同的布局选项，然后系统会以合适的方式将布局选项呈现到相应的屏幕上，这个过程不需要程序员用代码进行干预。 屏幕纵横比 屏幕的物理长度与物理宽度之比。程序只需使用系统提供的资源分类器 long（长）和 notlong（不长），就能为具有特定长宽比的屏幕提供配制材料。 分辨率 屏幕的像素总数。请注意，分辨率并不意味着长宽比，尽管在大多数情况下，分辨率表示为 "宽度 x 长度"。在安卓系统中，程序一般不直接处理分辨率。 密度 根据屏幕分辨率，沿屏幕宽度和长度排列的像素数量。 密度较低的屏幕在长度和宽度方向上的像素都相对较少，而密度较高的屏幕通常会在同一区域内排列很多甚至非常非常多的像素。屏幕的密度非常重要；例如，一个界面元素（如按钮）的长度和宽度以像素为单位，在低密度屏幕上会显得很大，但在高密度屏幕上就会显得很小。 独立于密度的像素（DIP）是指程序用来定义界面元素的抽象意义上的像素。它作为一个与实际密度无关的单位，帮助程序员构建布局方案（界面元素的宽度、高度和位置）。 与密度无关的像素在逻辑上与像素密度为 160 DPI 的屏幕上的像素大小相同，而 160 DPI 是安卓平台默认的显示设备。在运行时，平台会以目标屏幕的密度为基准，"透明 "地处理所有所需的 DIP 缩放操作。要将与密度无关的像素转换为屏幕像素，可以使用一个简单的公式：像素 = DIP * (密度 / 160)。例如，在 240 DPI 的屏幕上，1 个 DIP 等于 1.5 个物理像素。强烈建议使用 DIP 来定义程序界面的布局，因为这样可以确保用户界面在所有分辨率的屏幕上都能正常显示。 为了简化程序员在面对各种分辨率时的麻烦，也为了让各种分辨率的平台都能直接运行这些程序，Android 平台将所有屏幕以密度和分辨率作为分类方式，分别分为三类：- 三大尺寸：大、普通、小；- 三种不同密度：高（hdpi）、中（mdpi）和低（ldpi）。DPI 表示 "每英寸点数"，即每英寸的像素数。如果需要，程序可以为不同的屏幕尺寸提供不同的资源（主要是布局），为不同的屏幕密度提供不同的资源（主要是位图）。除此之外，程序无需对屏幕尺寸或密度进行任何额外处理。执行时，平台会根据屏幕本身的尺寸和密度特性自动加载相应的资源，并将其从逻辑像素（DIP，用于定义界面布局）转换为屏幕上的物理像素。