首页 > 代码库 > 浅谈一下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移动端基本
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。