| 123456789101112131415161718192021222324252627282930313233343536373839 |
- <!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>
- </head>
- <body>
-
- <!--
- 像素：
- -屏幕是由一个一个发光的小点构成，这一个一个的小点就是像素
- -分辨率：1920×1080，说的就是屏幕中小点的数量
- -在前端开发中像素要分成两种情况讨论：CSS像素和物理像素
- -物理像素：上述所说的小点点就属于物理像素
- -CSS像素：编写网页时，我们所用的像素都是CSS像素
- -浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
- -一个CSS像素最终由几个物理像素显示，由浏览器决定，
- 默认情况下在PC端，一个CSS像素 = 一个物理像素
- 视口（viewport）
- -视口就是屏幕中用来显示网页的区域
- -可以通过查看视口的大小，来视察CSS像素和物理像素的比值
- -默认情况下：
- 视口的宽度 1920px（CSS像素）
- 1920px（物理像素）
- -此时，CSS像素和物理像素的比是1:1
- -放大两倍的情况：
- 视口宽度 960px（CSS像素）
- 1920px（物理像素）
- -此时，CSS像素和物理像素的比是1:2
- -我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值
- -->
- </body>
- </html>
|
