像素
像素：屏幕中的小点。
分辨率：屏幕中小点的数量。
前端开发中，分css像素和物理像素。电脑设置里的那个分辨率设置的是物理像素，我们写的html文件写的是css像素。
浏览器在显示网页时，需要将css像素转换为物理像素后再呈现。
一个css像素最终由几个物理像素显示，有浏览器决定。
默认情况下在PC端为1:1。
视口
视口是屏幕中用来显示网页的区域。
可以通过查看视口的大小，来观察css像素与物理像素的比值。
看视口宽度
高度没啥用，不是定死的。
F12打开，找html的宽度。
这里的1280,就是默认的视口宽度。
实际上我的显示分辨率是1920*1080，视口宽度只有1280是因为我设置的那个缩放为150%，还有就是F12打开的开发者工具如果是停靠在右边或左边的话，视口宽度也是会变小，改成停靠在下边就可以了。最后一点是网页的缩放改成100%（像我就经常放大或缩小网页）
总的说，电脑设置里改成100%缩放，网页改成100%缩放时，物理像素和css像素就是1:1。
当我像上图所示把网页放大到200%时，css像素变成了640。
写一个div
这里写一个100*100的div来看看它的宽度和高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #bfa;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css像素为100*100，测一下物理像素。
物理像素300，看一下视口宽度。
视口宽度640。
我的网页缩放为200%，笔记本里的缩放为150%，像素的宽度为1920，有感兴趣的可以算算这个显示对不对。
总结
从什么的学习可以知道，我们可以通过改变视口大小来改变css像素和物理像素的比值。
1180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
