38. 适配布局_html媒体查询适配屏幕大小-优快云博客

本文链接：https://blog.youkuaiyun.com/potato123232/article/details/125905414

本文详细介绍了媒体查询的使用，包括如何根据屏幕尺寸改变背景颜色、元素大小。同时，探讨了rem在响应式布局中的应用，结合媒体查询实现苏宁首页的模拟布局。此外，还讲解了vw/vh单位的使用，并模拟了B站移动端首页，展示了字体图标和响应式布局的实现。文章通过实例代码展示了不同技术方案的实现过程，为移动端前端开发提供了实用的参考。

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

1 媒体查询

媒体查询(Media Query)是CSS3新语法，使用媒体查询前要加入视口

我们可以使用媒体查询改变html的font-size，从而控制页面中所有元素的大小

媒体查询的语法是这样的

mediatype是媒体类型，主要有下面三个常用值

all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等

mediatype的and,not与only叫关键字

and 且
not 非
only 只有

media feature是媒体特性，我们了解下面三个

注意media feature要加小括号

我们下面做一个如果屏幕宽度小于800px时屏幕背景颜色变为青色，否则不变

当宽度小于800px时是这样的

大于800px时是这样的

可以对一个条件进行多次判断，我现在想让宽度小于500px时，背景变为红色，500-800px时变为青色，800px以上不设置背景颜色

宽度小于500px时

500-800之间

大于800

可以使用and连接多个判断条件，比如我现在想要

500px 以下为红色
550px-800px 为青色

其余条件不设置背景颜色

那么我们可以在青色的判断条件中加入min-width

500px以下

500-550px

550-800px

800px以上

2. rem适配布局

2.1 rem

rem（root em）是一个相对的单位，类似于em。em随着父元素字体大小改变而改变，rem随着html元素字体大小改变而改变，比如html的font-size设置为12px后再设置一个div的宽度为2rem，那么div的宽度就为24px

好处是使用rem为单位，我们只需要修改html的字体大小，就可以改变所有元素的大小，而且是等比例改变

使用rem可以做到下面这些事情

文字可以随着页面尺寸的改变而改变
元素可以随着页面尺寸等比例缩放(高度可以自适应)

2.2 媒体查询+rem改变元素大小

当宽度小于600px时，盒子是这样的

当宽度在600-700px之间的时候，盒子是这样的

当宽度大于700px时，盒子是这样的

2.3 媒体查询引入文件

语法是这样的

我们做个例子

red.css

cyan.css

当屏幕宽度小于650px时，盒子是红色的

大于650px时，盒子是青色的

2.4 rem方案执行

首先先选择技术方案，两种技术方案原理类似

你会拿到一张原型图，基本只给你一张，如果有多张比例不同的就需要使用媒体查询进行多宽度判断

原型图的宽度基本以750px为准

之后我们定义750px时，html的font-size为50px

总要有一个font-size，一般我们都会选用这个值，这个值无论你选什么也不会影响元素的宽高比，如果你的font-size选的越大，你的元素展示的就会越小，比如说我选100px，那么元素的宽就会为font-size:50px元素的宽的一半

之后你在定义元素宽高的时候都使用rem作为单位，比如你在原型图上看到了一个宽150px，高200px的盒子，那么你给的时候就应该给width:3(150/50)rem，height:4(200/50)rem

最后定义媒体查询，比如你现在写一个宽度为320px的媒体查询，那么你应该把font-size修改为21.33px = 320 / (750/50)

2.5 苏宁首页模拟(技术方案一)

苏宁移动端首页地址苏宁易购(Suning.com)-家电家装成套购，专注服务省心购！

我做到了10个功能那里，下面直接用子绝父相去摆就可以了

项目中使用了less，less的简单用法可以看一下这个

附录9-less基础_Suyuoa的博客-优快云博客

2.5.1 媒体查询

我们关注这些像素值

media.less

@diviend:15;

@media screen and (max-width:320px) {
    html {
        font-size:(320px/@diviend);
    }
}

@media screen and (min-width:320px) and (max-width:360px) {
    html {
        font-size:(360px/@diviend) ;
    }
}

@media screen and (min-width:360px) and (max-width:375px) {
    html {
        font-size:(375px/@diviend) ;
    }
}

@media screen and (min-width:375px) and (max-width:384px) {
    html {
        font-size:(384px/@diviend) ;
    }
}

@media screen and (min-width:384px) and (max-width:400px) {
    html {
        font-size:(400px/@diviend) ;
    }
}

@media screen and (min-width:400px) and (max-width:414px) {
    html {
        font-size:(414px/@diviend) ;
    }
}

@media screen and (min-width:424px) and (max-width:480px) {
    html {
        font-size:(480px/@diviend) ;
    }
}

@media screen and (min-width:480px) and (max-width:540px) {
    html {
        font-size:(540px/@diviend) ;
    }
}

@media screen and (min-width:540px) and (max-width:720px) {
    html {
        font-size:(720px/@diviend) ;
    }
}

@media screen and (min-width:720px) and (max-width:750px) {
    html {
        font-size:(750px/@diviend) ;
    }
}

@media screen and (min-width:750px) {
    html {
        font-size:60px ;
    }
}

2.5.2 首页部分

index.less

// @import 'media';

@rate:25.6;
body {
    height:3000px;
}
// 头部新人大礼包

.header {
    height:(45rem/@rate);
}

.header img {
    width: 100%;
    height: 100%;
}

// 搜索框上部
.up_search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: (38rem/@rate);
    background-color: yellow;
}

.up_search span {
    width:(18rem/@rate);
    height:(30rem/@rate);
    background-size: (18rem/@rate) auto;
    background-repeat: no-repeat;
    margin: 0px 17px;
}

.up_search span:nth-child(1) {
    background-image: url(../images/class.png);
}

.up_search span:nth-child(3) {
    background-image: url(../images/mine.png);
}

.up_search img {
    width:(195rem/@rate);
    height:(38rem/@rate);
}

// 搜索框

.search {
    position: relative;
    padding-top: (10rem/@rate);
    padding-bottom: (10rem/@rate);
    background-color: yellow;
}

.search input {
    position: relative;
    left: 50%;
    transform: translate(-50%,0);
    width: 95%;
    height:(35rem/@rate);
    border-radius:(22rem/@rate);
    text-indent: (40rem/@rate);
    font-size: (14rem/@rate);
    border:transparent solid 1px;
}

.search span {
    position:absolute;
    left:(25rem/@rate);
    line-height:(35rem/@rate);
    font-family: icomoon;
    font-size:(20rem/@rate);
    color:gray;
    z-index: 999;
}

// 轮播图
.rotate {
    position: relative;
    overflow: hidden;
    height:(120rem/@rate);
}

.rotate img {
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    width:95%;
    height: 100%;
    border-radius: (15rem/@rate);
    z-index: 999;
}

.rotate_background {
    position: relative;
    left: 50%;
    transform: translate(-50%,0);
    background-color: yellow;
    width:150%;
    height:(90rem/@rate);
    border-radius: 0 0 70% 70%;
}

// 免息广告
.interest_free {
    height:(100rem/@rate);
    background:url(../upload/interset_free.gif);
    background-size: 100% 100%;
}

// 十个功能
.ten_function {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: (15rem/@rate);
}

.ten_function a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
}

.ten_function a img {
    width: (42rem/@rate);
    height: (42rem/@rate);
}

.ten_function p {
    font-size:(14rem/@rate);
}

我手头没有原型图，我直接用iphone6显示出来的界面当作原型图，显示出来的宽度为375

确定了以375px为基准，我们回到刚刚生成的媒体查询css，找到375px的字体大小

发现是25.6px，之后的所有元素大小，可以先用px看一下，看完之后把px改成rem，然后再除我们定义的rate，就可以适配大多数屏幕了

比如说我的这个分类按钮

在原型图中量出来是 18*30px，那么你就这样写

也不一定所有的单位都要用rem，比如我下面的margin用的就是17px，在一定范围内依然正常显示

html

<!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,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" href="css/initialization.css">
    <link rel="stylesheet" href="css/media.css">
    <link rel="stylesheet" href="css/index.css">
    
    <title>Document</title>
</head>
<body>
    <section class="header"><img src="upload/new_one_199.gif" alt=""></section>

    <section class="up_search">
        <span></span>
        <img src="upload/cool_summer.gif" alt="">
        <span></span>
    </section>

    <section class="search">
        <span class="magnifier"></span>
        <input type="text" placeholder="空调">
    </section>

    <section class="rotate">
        <img src="upload/rotate.jpg" alt="">
        <div class="rotate_background"></div>
    </section>

    <section class="interest_free"></section>

    <section class="ten_function">
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p>家电</p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p>家电</p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p>家电</p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p>家电</p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p>家电</p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p>家电</p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p>家电</p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p>家电</p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p>家电</p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p>家电</p>
        </a>
    </section>
    
</body>
</html>

在稍微宽一点儿的屏幕中同样使用

2.6 苏宁首页模拟(技术方案二)

上面使用的是技术方案一，现在我们走一下技术方案2中的流程，技术方案二中用到flexible.js

flexible.js项目地址 GitHub - amfe/lib-flexible: 可伸缩布局方案

解压后会有这些文件

我们复制方案一的代码，把media.css与media.less删掉，创建一个名为js的文件夹，然后将index.js放入js中

在index.html中屏蔽掉media.css，然后加入script那一行

在flexible.js除的是10，我们上面除的是15，我们的原型图是375px，所以要将index.less的rate改为37.5

所谓的份数(10份，15份这种)对页面的展示效果影响不大，如果用flexible.js你直接用10就行了(flexible.js默认是10)

如果这里你没有使用less，也不想用计算器一个一个算，那么你可以使用vscode中的插件cssrem，这个插件在你写px的时候，会自动帮你转换成rem，使用方式在这里有介绍黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

之后进入initialization.css中取消对body最大宽度与最小宽度的约束

如果你还是想要约束尺寸，你可以这样写

这里不加!important的权重没有js中的权重高，如果只约束body的大小而不约束font-size的话，你的页面会达不到想要的效果

这样我们方案二就做完了，打开后我们可以改变宽度，在改变宽度的过程中会比较丝滑(不存在元素大小突变)

3 v系列

v系列包含一些单位(PC端兼容性较差)

vw(viewport width)视口宽度单位，1vw = 1%视口宽度
vh(viewport height)视口高度单位，1vh = 1%视口高度
vmin 视口宽度与高度较小的一个单位，如果宽度小vmin=vw，如果高度小vmin=vh，一般来讲我们的手机都是宽小高长，所以我们常用vmin代替vw，从而适配用户将手机横过来的情况，如果你的原型图是竖着的，那么我建议用vmin代替vw
vmax 视口宽度与高度较大的一个单位，如果宽度大vmax=vw，如果高度大vmax=vw，如果你的原型图是横着的，我建议用vmax代替vw

跟你直接写百分比是不一样的，写百分比是以父元素的宽高做基数，写vw,vh是以视口宽高做基数

3.1 简单使用

我们下面简单用一下

并不是设置宽度只能用vw，设置高度只能用vh，下面会提到

这样它的宽度总是占视口宽度的20%，高度总是占视口高度的10%

横向与纵向拉伸后盒子的尺寸会随拉伸而变化

3.2 与px的转换

我们以在iphone678举例，iphone678的视口宽度尺寸是375px，使用宽度为375px的盒子可以恰好将其宽度占满

现在我们原型图中画着一个50px*50px的盒子，这个时候我们用50/375可以得到50px的长度在宽度中占比是多少，将这个占比(小数)*100，就得到了我们的vw值了，也就是13.33vw

我们将盒子大小改成 13.33vw * 13.33vw

这样我们就得到了在iphone678中50px*50px的盒子

我们可以搞一个50px*50px的盒子比对一下

发现这两个盒子是一致的

也可以使用这个px2vw这个插件进行转换

我更喜欢用less计算一下，这个我后面如果有用到再更新

3.3 bilibili移动端首页模拟

原版是这样的

再下面就是不同的内容，布局都相同，我们就做四个就行了

3.3.1 网站独有字体图标

b站的这个地方是用字体图标做的

找到元素后照代元素的iconfont这种类名，然后看是在哪里引用的，之后点击它

点击后我们可以在sources中看到很长一行的CSS

如果是font-face这样的，那么这个就是它的字体引用的内容了

之后你再学着它的写法写一下

这样就获得了这个图标

不只是logo使用了字体图标，像这个放大镜也使用了字体图标

所以一起抄下来就好了

3.3.2 源码

做出来是这样的

由于使用大多是vmin，所以把手机横过来也没有什么问题

也能适应pad

html

<!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,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/initialization.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="fonts/bilibili_font.css">
</head>
<body>
    <header>
        <div class="left">
            <a class="iconfont Navbar_logo"></a>
        </div>
        <div class="right">
            <span class="iconfont ic_search_tab"></span>
            <a href="#" class="login"><img src="images/login.png@48w_48h_1c.png" alt=""></a>
            <a href="#" class="download"><img src="images/navOpenApp.png" alt=""></a>
        </div>
    </header>
    
    <nav>
        <a href="#">
            <span class="current">首页</span>
        </a>
        <a href="#" >动画</a>
        <a href="#" >番剧</a>
        <a href="#" >国创</a>
        <a href="#" >音乐</a>
        <a href="#" >舞蹈</a>
        <div class="iconfont general_pulldown_s"></div>
    </nav>

    <article>
        <a href="#">
            <div class="pic">
                <img src="upload/开学.webp" alt="">
                <div class="information">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        102.8万
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        2990
                    </span>
                </div>
                
            </div>
            <p>史诗级灾难片《开学》，豆瓣评分9.1</p>
        </a>

        <a href="#">
            <div class="pic">
                <img src="upload/开学.webp" alt="">
                <div class="information">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        102.8万
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        2990
                    </span>
                </div>
                
            </div>
            <p>史诗级灾难片《开学》，豆瓣评分9.1</p>
        </a>

        <a href="#">
            <div class="pic">
                <img src="upload/开学.webp" alt="">
                <div class="information">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        102.8万
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        2990
                    </span>
                </div>
                
            </div>
            <p>史诗级灾难片《开学》，豆瓣评分9.1</p>
        </a>

        <a href="#">
            <div class="pic">
                <img src="upload/开学.webp" alt="">
                <div class="information">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        102.8万
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        2990
                    </span>
                </div>
                
            </div>
            <p>史诗级灾难片《开学》，豆瓣评分9.1</p>
        </a>

        <a href="#">
            <div class="pic">
                <img src="upload/开学.webp" alt="">
                <div class="information">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        102.8万
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        2990
                    </span>
                </div>
                
            </div>
            <p>史诗级灾难片《开学》，豆瓣评分9.1</p>
        </a>

        <a href="#">
            <div class="pic">
                <img src="upload/开学.webp" alt="">
                <div class="information">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        102.8万
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        2990
                    </span>
                </div>
                
            </div>
            <p>史诗级灾难片《开学》，豆瓣评分9.1</p>
        </a>

        <a href="#">
            <div class="pic">
                <img src="upload/开学.webp" alt="">
                <div class="information">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        102.8万
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        2990
                    </span>
                </div>
                
            </div>
            <p>史诗级灾难片《开学》，豆瓣评分9.1</p>
        </a>

        <a href="#">
            <div class="pic">
                <img src="upload/开学.webp" alt="">
                <div class="information">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        102.8万
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        2990
                    </span>
                </div>
                
            </div>
            <p>史诗级灾难片《开学》，豆瓣评分9.1</p>
        </a>

        <a href="#">
            <div class="pic">
                <img src="upload/开学.webp" alt="">
                <div class="information">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        102.8万
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        2990
                    </span>
                </div>
                
            </div>
            <p>史诗级灾难片《开学》，豆瓣评分9.1</p>
        </a>

        <a href="#">
            <div class="pic">
                <img src="upload/开学.webp" alt="">
                <div class="information">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        102.8万
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        2990
                    </span>
                </div>
                
            </div>
            <p>史诗级灾难片《开学》，豆瓣评分9.1</p>
        </a>

        <a href="#">
            <div class="pic">
                <img src="upload/开学.webp" alt="">
                <div class="information">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        102.8万
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        2990
                    </span>
                </div>
                
            </div>
            <p>史诗级灾难片《开学》，豆瓣评分9.1</p>
        </a>
    </article>
</body>
</html>

less

@view_width:375;

body {
    height:3000px;
}

header {
    position: fixed;
    width:100%;
    height:(45vmin/@view_width)*100;
    display: flex;
    justify-content: space-between;
    z-index: 999;
    background-color: #fff;
    .left {
        position: relative;
        .Navbar_logo {
            position: absolute;
            top:(3vmin/@view_width)*100;
            left:(15vmin/@view_width)*100;
            color:#fb7299;
            font-size: 7.46667vmin;
        }
    }
    .right {
        position: relative;
        .ic_search_tab {
            position: absolute;
            top:(9vmin/@view_width)*100;
            right:(160vmin/@view_width)*100;
            color:#ccc;
            font-size: 5.86667vmin;
        }
        .login {
            position: absolute;
            top:(12vmin/@view_width)*100;
            right:(110vmin/@view_width)*100;
            display: inline-block;
            width: (24.01vmin/@view_width)*100;
            height:(24.01vmin/@view_width)*100;
            border-radius: 3.2vmin;
            img {
                width:100%;
                height:100%;
            }
        }
        .download {
            position: absolute;
            top:(10vmin/@view_width)*100;
            right:(15vmin/@view_width)*100;
            display: inline-block;
            width:(72.4vmin/@view_width)*100;
            height:(24.1vmin/@view_width)*100;
            img {
                width:100%;
                height:100%;
            }
        }
    }
    
}

nav {
    position: fixed;
    top:(45vmin/@view_width)*100;
    width:100%;
    height:(40.01vmin/@view_width)*100;
    z-index: 999;
    background-color: #fff;
    a {
        float: left;
        display: inline-block;
        width: (60vmin/@view_width)*100;
        height:(40.01vmin/@view_width)*100;
        font-size:3.73333vmin;
        line-height: (40.01vmin/@view_width)*100;
        text-align: center;
        span {
            display: inline-block;
        }
    }
    .general_pulldown_s {
        position: absolute;
        top:(5vmin/@view_width)*100;
        right:(3vmin/@view_width)*100;
        font-size:5.33333vmin;
        z-index: 999;
    }

    .current {
        color:#fb7299;
        line-height: (38vmin/@view_width)*100;
        border-bottom: 2px solid #fb7299;
    }
}

article {
    position: relative;
    width:100%;
    top:(95vmin/@view_width)*100;
    display: flex;
    flex-wrap: wrap;
    padding:0px 5px;
    a {
        position: relative;
        width:50%;
        height:(130vmin/@view_width)*100;
        padding:0px 4px;
        margin-bottom: 20px;
        .pic {
            position: relative;
            width:100%;
            height:(97.09vmin/@view_width)*100;
            img {
                position: absolute;
                width:100%;
                height:100%;
            }
            .information {
                position: absolute;
                bottom:0px;
                display: flex;
                justify-content: space-between;
                width:100%;
                padding:0px 5px;
                color:#fff;
                z-index: 998;
            }
        }
        p {
            color:#212121;
            font-size:3.2vmin;
            margin-top: 5px;
        }
    }
}