<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
像素：
-屏幕是由一个一个发光的点构成，一个个点就是像素；
默认是看不到的，也是方形的；
-在前端开发中，分两种情况来讨论：
一种是物理像素：上面的讨论就是物理像素；
一种是CSS像素：在编写网页时，我们所用的像素都是css像素；
-浏览器在显示网页时，需要将css像素转换为物理像素在呈现；
一个CSS像素转成多少个物理像素，由浏览器决定；
默认情况下在PC端，一个CSS像素等于一个物理像素；
视口：
-屏幕中用来显示网页的区域；
通过查看视口的大小，查看CSS和物理像素的关系；
默认情况下，
视口宽度是1920PX CSS像素；显示器物理像素也是1920PX，此时比例是1:1；
放大2倍的情形：
视口宽度是900px;物理像素是1920px；此时比列是1:2；
可以通过改变视口的大小，改变CSS像素和物理像素的比值。
在不同的屏幕中，单位像素的大小是不同的；像素越小，屏幕就会越清晰；
大部分清下下，智能手机的像素要远远小于PC显示器的像素点；
默认情况下，移动端的手机视口都会设置为980px。
-以确保PC端的网站可以在移动端正常访问；
但是网页的宽度如果超过了980px,移动端浏览器会自动缩放。
所以，大部分PC端网站都可以在移动端正常显示，但是往往都不会有好的体验；
-为了解决这样的问题，大部分网站都会为移动端专门设计网页；
-->
</body>
</html>
CSS 像素的问题
Supongo que te gusta
Origin blog.csdn.net/weixin_47401101/article/details/113403788
Recomendado
Clasificación