十七、web网页像素知识

最新推荐文章于 2024-08-02 13:35:44 发布

gaoya7305

最新推荐文章于 2024-08-02 13:35:44 发布

阅读量558

点赞数

文章标签：前端像素 px css像素物理像素视口viewport

本文链接：https://blog.csdn.net/gaoya7305/article/details/131706995

版权

像素
视口

一、像素

像素：
       - 屏幕是由一个个发光的小点构成，这一个个的小点就是像素
       - 分辨率：1920 x 1080 说的就是屏幕中小点的数量
       - 在前端开发中像素要分成两种情况讨论：css像素和物理像素
       - 物理像素：上述所说的小点点就属于物理像素
       - css像素：编写网页时，我们所用的像素都是css像素（width:100px）
        - 浏览器在显示网页时，会把css像素转换为物理像素然后再呈现
        - 一个css像素最终由几个物理像素显示，由浏览器决定
            默认情况下在PC端，一个css像素 = 一个物理像素（还有不等的情况）

二、视口

   视口（viewport）
            - 视口就是屏幕中用来显示网页的区域
            - 可以通过查看视口的大小，来观察css像素和物理像素的比值
            - 默认情况下：
                视口宽度 1920px(css像素)
                        1920px(物理像素)
                        - 此时，css像素和物理像素的比是1:1
            - 放大两倍的情况：
                视口宽度 960px  (css像素)
                               1920px (物理像素)
            - 我们可以通过改变视口的大小，来改变css像素和物理像素的比值

注意：

视口我们一般只看宽度，不看高度，因为网页宽度一般都是定死，而高度不定。
通常一个块元素的宽度，默认是他父元素宽度的100%，所以我们只需要找到那个视口的子元素就可以了。
视口的子元素就是html.所以看视口的宽度，就看html的宽度。

**如何看html宽度（视口的宽度）？**

点击网址那块区域右侧有个缩放放大镜，将视口进行重置到100%。
然后点击下面的html标签
看右侧盒子里面写的宽度1920
因为我现在的视口的宽度是放大到和我电脑屏幕宽度一样，所以物理像素也是1920

**网页放大的原理是什么？**

— 当我们进入浏览器，按住ctrl + 鼠标滚轮的时候，浏览器可以进行放大缩小。
— 他是把以前的1个css像素变成2个css像素，对应的整个视口就变小了。（放大网页，视口区域就变小了）。

测试：
现在我们把网页放大到200%，发现视口变成960，而视口还是1920，因为我们的电脑屏幕大小没变过。

**现在我们在css像素和物理像素的比是1:2 的情况下，如果我们设置了css像素宽高为100px, 那他的物理像素是多少呢？**

   <style>
         /* 现在我们在css像素和物理像素的比是1:2 的情况下，如果我们设置了css像素宽高为100px, 那他的物理像素就是200.
         你可以用截图工具，去量，量出来的宽度和高度，就是物理像素。
         */
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

	<body>
  <div class="box1"></div>
  </body>