6.继续移动端适配(vw,min-width,max-width)

最新推荐文章于 2023-04-19 16:39:52 发布

风无雨

最新推荐文章于 2023-04-19 16:39:52 发布

阅读量513

点赞数

分类专栏： # css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/wusandaofwy/article/details/125963079

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.vw介绍

vw：viewport width
vh：viewport height

vw是相对单位,1vw = 1/100视口宽度, 1vh = 1/100视口高度

vw不需要媒体查询屏幕大小,自动检测视口大小,把视口宽度和视口高度分成了100份 ,

写移动端首先确定设计稿对应的vw尺寸（1/100视口宽度）
方法:查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸（1/100
视口宽度）

注意:在开发中我们一般只使用vw作为单位尺寸,而不使用vw与vh混用,
因为vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形.

rem和vw的区别:
rem市场比较常见：
1.需要不断修改html文字大小
2.需要媒体查询media
3.需要 flexible.js
vw是将来(马上)趋势:
1.省去各种判断和修改
代表网站:bilibili

使用方法如下:

<!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>
   /* <!-- vw不需要媒体查询屏幕大小,自动检测视口大小,把视口宽度和视口高度分成了100份 -->
    <!-- 400px400px的盒子转为vw --> */
    .box{
        width: 106.67vw;
        height: 106.67vw;
        background-color: pink;
    }
    </style>
 
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

2.min-width和max-width

min-width:最小宽度;(min-width:200px)表示200px以上,最小值为200px
max-width:最大宽度;(max-width:200px)表示0px到200px,最大值为200px

如要达成’"当屏幕宽度大于530时,屏幕变绿"的需求,代码如下

<!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>
    <!-- 当屏幕宽度大于530时,屏幕变绿 -->
    <style>
        @media (min-width:530px) {
             html{
                background-color: green;
             }
        }
    </style>
</head>
<body>
    
</body>
</html>