获取设备独立像素比例值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取独立像素与物理像素比例值</title>
</head>
<body>
<script>
// 像素和设备独立像素的一个关系
alert(window.devicePixelRatio);
</script>
</body>
</html>
获取设备的物理像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 以像素计,屏幕的大小
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
console.log('屏幕的宽度为: ' + screenWidth);
console.log('屏幕的高度为: ' + screenHeight);
</script>
</body>
</html>
css像素
<!DOCTYPE html>
<html lang="en">
<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>
</body>
</html>