如何实现自适应页面

最新推荐文章于 2025-06-09 13:31:24 发布

简。单

最新推荐文章于 2025-06-09 13:31:24 发布

阅读量614

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_45306991/article/details/141524247

网页自适应的问题——响应式布局

1.媒体查询
CSS中有一个叫做媒体查询（Media queries）的功能，这个功能可以让你查询当前运行网页的设备的一些信息，让你可以通过这些信息来调整网页的布局和样式等。常见的响应式布局通常就是利用这个功能来实现的。

@media 查询条件{
   CSS-Code;
}
/* 查询条件可以是媒体类型或媒体特性 */
/* 也可以是由and、not、only、or修饰组合而成的短语 */
/* 多个条件也可以用 ，（逗号）连接，相当于 or */
/* 媒体特性需要用圆括号包围 */

@media only screen and (max-width: 100px) {
    body {
        background-color: #fff;
    }
}
@media only screen and (max-width: 500px) {
    body {
        background-color: #ccc;
    }
}
@media only screen and (max-width: 1000px) {
    body {
        background-color: #ddd;
    }
}

响应式布局主要为了让页面在不同显示设备上以合适的方式显示而出现的一种设计思路。对于小型的网页来说目前常见的响应式布局通常是利用媒体查询结合标签的viewpoint属性来实现的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <!-- 浏览器需要下面一行才能正确响应响应式布局 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }

        html,
        body {
            height: 100%;
        }
        body {
            display: flex;
            flex-wrap: wrap;
        }

        .header {
            width: 100%;
            height: 10%;
            background-color: salmon;
        }
        .nav {
            background-color: lightgreen;
        }
        .main {
            background-color: mediumturquoise;
        }
        .footer {
            width: 100%;
            height: 10%;
            background-color: orchid;
        }

        /* 在页面较宽时 */
        @media (min-width: 576px) {
            .nav {
                width: 20%;
                height: 80%;
            }
            .main {
                width: 80%;
                height: 80%;
            }
        }

        /* 在页面较窄时 */
        /* 手机竖着拿的时候页面的CSS像素宽度大多小于576px */
        @media (max-width: 575px) {
            .nav {
                width: 100%;
                height: 10%;
            }
            .main {
                width: 100%;
                height: 70%;
            }
        }
    </style>
</head>
<body>
    <div class="header"> 标题栏 </div>
    <div class="nav"> 导航栏 </div>
    <div class="main"> 正文 </div>
    <div class="footer"> 页脚 </div>
</body>
</html>

2.CSS兼容性处理方案

① 浏览器CSS样式初始化
padding 、margin 和 line-height等在全局初始化，统一不同浏览器之间的差异。

② 浏览器的私有属性
CSS属性前添加一些前缀
-webkit-：代表Chrome Safari
-moz-：代表 Firefox
-ms- ：IE
-o-：代表Opera

③ CSS hack
针对不同的拉群里或不同版本写的CSS样式这种不同浏览器、不同版本写相应的CSS Code。

④ 自动化插件
postcss-px-to-viewport插件

3.rem布局
rem是弹性布局的一种实现方式,弹性布局可以算作响应式布局一种,但响应式布局不是弹性布局，弹性布局强调等比缩放,100%还原，响应式布局强调不同屏幕有不同的显示，比如媒体查询。
rem 最中要的就是要设置根字体的大小，1rem 就是根字体的大小，所以当我们拿到设计稿的时候，就要通过设计稿去设置根字体的大小。