体验vw和媒体查询

最新推荐文章于 2024-07-12 00:17:49 发布

流川枫不风流

最新推荐文章于 2024-07-12 00:17:49 发布

阅读量59

点赞数

文章标签：媒体 html javascript

本文链接：https://blog.csdn.net/YasWestmere/article/details/127271067

版权

1.体验vw

 .box {
            /* vw = 测量的值 / (参考标准稿3.75) */
            width: 26.6vw;
            /* vh = 测量的值 / 标准稿6.67 */
            /* height: 15vh; */
            height: 26.6vw;

            background-color: pink;
        }

        /* 注意点: vw和vh不会一起使用,如果一起使用盒子会变形 */
        /* 如何保证盒子不变形,我们可以使用一个单位,要么统一使用,vw或vh ,我们推荐使用vw */
    </style>
</head>

<body>
    <div class="box"></div>
    <!-- vw 视口的宽   1vw=当前屏幕宽度的1/100   
         vh 视口的高    1vh=当前屏高度的1/100 
         
         例如:屏幕宽375px  1vw=3.75px   屏幕高667  1vh=6.67

2.媒体查询

<style>
        body {
            background-color: pink;
        }
         @media (min-width:768px) {

            body {
            background-color: green;
        }
         }
         /* max-width:值  当前的值不能大于我们书写的值
         min-width:值  当前的值不能小于我们书写的值 */
    </style>
</h