一.屏幕
屏幕尺寸实际上指的是屏幕对角线的长度,而分辨率则一般用像素来度量 px,表示屏幕水平和垂直方向的像素数。
二.长度单位
可以使用px(像素)、em、pt(点)、in(英寸)、cm(厘米)做为长度单位,最常用px(像素)做为长度单位;
三.像素密度
DPI(Dots Per Inch)是印刷行业中用来表示打印机每英寸可以喷的墨汁点数,计算机显示设备从打印机中借鉴了DPI的概念,由于计算机显示设备中的最小单位不是墨汁点而是像素,所以用PPI(Pixels PerInch)值来表示屏幕每英寸的像素数量,我们将PPI、DPI都称为像素密度,但PPI应用更广泛,DPI在Android设备比较常见。
屏幕尺寸固定时,当PPI 越大,像素的实际大小就会越小,画面越精细,当PPI越小,像素实际大小就越大。
四.设备独立像素
<head>
<meta charset="UTF-8">
<title>获取独立像素与物理像素比例值</title>
</head>
<body>
<script>
// 像素和设备独立像素的一个关系
alert(window.devicePixelRatio);
dp(或pt)和px并不总是绝对的倍数关系(并不总能保证能够整除),而是window.devicePixelRatio ~= 物理像素/独立像素。
五.像素
1.物理像素指的是屏幕渲染图像的最小单位,属于屏幕的物理属性,不可人为进行改变,其值大小决定了屏幕渲染图像的品质。
// 获取屏幕的物理像素尺寸
window.screen.width;
window.screen.height;
// 以像素计,屏幕的大小
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
console.log('屏幕的宽度为: ' + screenWidth);
console.log('屏幕的高度为: ' + screenHeight);
2.CSS像素,与设备无关像素,指的是通过CSS进行网页布局时用到的单位,其默认值(PC端)是和物理像素保持一致的(1个单位的CSS像素等于1个单位的物理像素),但是我们可通缩放来改变其大小。
<head>
<meta charset="UTF-8">
<title>CSS像素</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #F7F7F7;
/*height: 1400px;*/
}
.box {
改成自己的像素值
width: 1152px;
height: 120px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>