vw单位与媒体查询实现响应式设计-优快云博客

本文链接：https://blog.youkuaiyun.com/YasWestmere/article/details/127271067

本文探讨了vw单位在网页设计中的应用，通过使用vw实现布局的响应式变化。同时，介绍了媒体查询的概念，结合媒体查询与vw单位，能够更精确地控制不同设备上的显示效果。还讨论了显示与隐藏的技巧，以及响应式设计的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
</head>
<body>
    <div class="box"></div>
</body>

3.显示与隐藏

 @media (max-width:1200px) {
            .box div:first-child {
                display: none;
            }
            
        }
        .box {
            width: 80%;
            margin: 0 auto;
            
            display: flex;
        }
        .box div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box div:nth-child(2) {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <div> 这是第&个盒子</div>
        <div>这是第&个盒子</div>
        <div>这是第&个盒子</div>
    </div>

4.响应式原理

 .box {
            width: 80%;
            height: 400px;
           border: 5px solid #222;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }
        .box div {
            width: 25%;
            height: 200px;
            background-color: pink;
        }
        .box div:nth-child(2n) {
            background-color: aqua;
        }
        @media (max-width:992px) {
            .box div {
                width: 50%;
            }
            
        }
        @media (max-width:768px) {
            .box div {
                width: 100%;
            }
            
        }
   
    </style>

</head>
<body>
     <!-- 默认在pc端 -->
     <div class="box">
        <div>这是1个盒子</div>
        <div>这是2个盒子</div>
        <div>这是3个盒子</div>
        <div>这是4个盒子</div>
    </div>