首页 > 代码库 > 浅谈一下web移动端基本

浅谈一下web移动端基本

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

屏幕尺寸:           指屏幕的对角线的长度,单位是英寸,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

浅谈一下web移动端基本