像素
像素:屏幕中的小点。
分辨率:屏幕中小点的数量。
前端开发中,分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像素和物理像素的比值。