浅谈一下web移动端基本

Posted 2020-09-19

屏幕尺寸、屏幕分辨率、屏幕像素密度

屏幕尺寸：   
        指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。
                常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。

屏幕分辨率：（iphone6  750*1334）
        指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，
                如1960*1080。（这里的1像素指的是物理设备的1个像素点）

屏幕像素密度/像素密度/屏幕密度：
        屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。
        屏幕像素密度与屏幕尺寸和屏幕分辨率有关

物理像素,CSS像素

 设备像素/物理像素：（分辨率）
            买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点，
                一个点（小方格）为一个物理像素。
                    它是屏幕能显示的最小粒度.

            设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。
                 每个像素可以根据操作系统设置自己的颜色和亮度。

            任何设备的物理像素的数量都是固定的 

CSS像素：
            CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。

            它是为web开发者创造的，在css或者javascript中使用的一个抽象的层

            一般情况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”。
            在一个标准的显示密度下(普通屏)，一个CSS像素对应着一个设备像素。

css像素与物理像素的关系
            一个width为200px的元素，它占据了200个css像素，但200个css像素占据多少个物理像素取决于
            屏幕的特性（是否是高密度,即像素比）和用户的缩放行为。

            在苹果的视网膜屏幕上，视网膜的像素密度是普通屏幕的两倍，这个元素就跨越了400个设备像素
            如果用户放大，它将跨越更多的设备像素

设备独立像素:设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，
            这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，
                然后由相关系统转换为物理像素。

位图像素：一个位图的像素是栅格图像(如：png, jpg, gif等)最小的数据单元  
        1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示       

对于web开发者而言：
            我们使用的每一个css和javascript定义的像素本质上代表的都是css像素，我们在开发过程中
            并不在意一个css像素到底跨越了多少个设备像素。我们将这个依赖于屏幕特性和用户缩放程度的
            复杂计算交给了浏览器。

像素比

像素比:它的官方的定义为：设备物理像素和设备独立像素的比例，
        也就是 devicePixelRatio = 物理像素 /独立像素
            window.devicePixelRatio