版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/z_x_Qiang/article/details/85952455
基本概念
1.屏幕尺寸 屏幕对角线的长度； 2.分辨率 横纵方向上的物理像素的个数乘积； 3.像素密度 对角线的像素/尺寸=像素密度； 4.css像素 css像素是和浏览器相关的，是一个抽象概念； 最终转换成一个物理像素，显示到屏幕上； 浏览器的最小单位； 一个css像素占据多少个物理像素，取决于屏幕的特性（高清屏，用户缩放等）； 5.位图像素 一张图片的尺寸，一个位图像素占据一个物理像素才是完美显示； 图片的最小单位； 6.设备独立像素 设备独立像素=css像素； 7.像素比（DPR） 像素比 = 物理像素/设备独立像素； 也就是同样的屏上，一个设备独立像素=像素比* 物理像素； 8.布局视口 当手机浏览器要完成显示一个pc网页的时候，要不出现横向滚动条的， 必须要一个容器吧这个网页放下，这个容器就是布局视口。 布局视口的宽度一般是980或者1024 css像素。 布局视口的大小和网页的尺寸大小是一致的；
9.视觉视口 就是用户看到的css像素的尺寸；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.test {
width: 375px;
height: 200px;
background: pink;
text-align: center;
line-height: 200px;
font-size: 30px;
}
</style>
</head>
<body>
<div id="test" class="test">test</div>
<script type="text/javascript">
window.onload = function () {
let div = document.getElementById("test");
div.onclick = function () {
//布局视口尺寸；
//pc端放大缩小时，视觉视口和布局视口都会是变得；
//移动端放大缩小布局视口尺寸是不变的，视觉视口是会变的；
div.innerHTML = document.documentElement.clientWidth;
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--这个当元素尺寸超过了视觉视口的时候是不会出现滚动条的-->
<!--<meta name="viewport" content="width=device-width">-->
<!--完美显示 会出现滚动条-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.test {
width: 375px;
height: 200px;
background: pink;
text-align: center;
line-height: 200px;
font-size: 30px;
}
body{
background: yellow;
}
</style>
</head>
<body >
<div id="test" class="test">test</div>
</body>
</html>系统缩放：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--系统缩放模式：在理想视口的基础上显示放大两倍，但是布局视口和视觉视口都缩放一倍；-->
<meta name="viewport" content="initial-scale=2.0">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.test {
width: 375px;
height: 200px;
background: pink;
text-align: center;
line-height: 200px;
font-size: 30px;
}
</style>
</head>
<body>
<div id="test" class="test">test</div>
</body>
</html>禁止缩放：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--下面三个属性禁止了android 和 ios的 缩放功能-->
<!--minimum-scale=1.0,-->
<!--maximum-scale=1.0,-->
<!--user-scalable=no"-->
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
>
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.test {
width: 375px;
height: 200px;
background: pink;
text-align: center;
line-height: 200px;
font-size: 30px;
}
body {
background: yellow;
}
</style>
</head>
<body>
<div id="test" class="test">test</div>
</body>
</html>