物理像素，css像素的理解,vw的使用以及案例

Gjanuary

已于 2022-03-04 17:32:12 修改

阅读量521

点赞数

分类专栏：移动端布局的集中解决方案文章标签： html

于 2022-03-04 17:29:00 首次发布

本文链接：https://blog.csdn.net/Gjanuary/article/details/123274301

版权

移动端布局的集中解决方案专栏收录该内容

6 篇文章 0 订阅

订阅专栏

（1）物理像素=>物理像素只的就是一个小点点

（2）另外一种是css像素=>css像素使我们书写代码的时候书写的单位

>>>浏览器在加载网页的时候，需要将css像素转化成物理像素<<<

默认情况下pc端一个css像素等于一个物理像素

默认情况下移动端的网页都会将980像素css像素，让pc端的网页在移动端也能全部展现出来

最佳像素比设置完美视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

vw是一个视口的宽度。无论视口多大，100vm总是表示整个宽度
1vw = 1%视口宽度
vw永远相对于视口宽度
（pc端相对于旧的浏览器支持不是很好，移动端可以不用担心使用）

设计图的宽度一般是750px（2倍图，375）或者1125px（3倍图，375）的

案例:
<!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>
        *{
            padding: 0;
            margin: 0;
            
        }
        /*设置htmlfont-size的大小，则rem就可以派上用场
            假如：设计图是750px大小的要充满整个可视区域也就是100vw
            那么1px = 0.1333333333333333vw
        */
        html{
            /*如果这个设置的话，理论上是可行的但是浏览器默然是字体最小是12px*/ 
           /* font-size:0.1333333333333333vw;*/
           /*扩大40倍相当于40px*/
           font-size:5.3333333vw
            
        }
        .main{
            /*vw指的视口大小当值是100vw的时候不同的手机代表着宽度是100%*/
          /*上面的设置是1rem = 40px 如果我想屏幕正好视频可以区域750/40*/
            width: 18.75rem;
            height: 35rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="main"></div>
    
</body>
</html>