媒体查询+rem+flexible.js实现移动端适配

灰太狼 2023-02-16 12:13 11阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTA5NzQ2_size_16_color_FFFFFF_t_70][]

### 技术栈简介： ###

**媒体查询：**通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览。（再通俗点来说，就是通过媒体查询，能够自动判断该浏览器所在屏幕的大小）

**rem：**CSS3新增的相对长度单位，是指相对于根元素`html`的`font-size`计算值的大小。简单可理解为屏幕宽度的百分比。

**flexible.js：**用来适配移动端的javascript框架。根据宽度的不同设置不同的字体大小，样式间距都使用rem作为单位，不同屏幕大小适配不同的样式。

### 下载normalize.css： ###

这一步可跳过，Normalize.css是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性。也就是说，使用了这个样式，在绝大部分浏览器上，都能呈现出良好的效果。

前往normalize.css官网下载：[http://necolas.github.io/normalize.css/][http_necolas.github.io_normalize.css]

如果是使用的脚手架，那么可直接使用npm安装：

npm install normalize.css

### 下载flexible.js: ###

前往flexible.js的github源码库上进行下载：[https://github.com/amfe/lib-flexible][https_github.com_amfe_lib-flexible]

其中的index.js即是flexible.js

### 测试的html页面： ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="js/flexible.js"></script>
        <title>适配测试</title>
    </head>
    
    <body>
        <div class="header">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <div class="banner"></div>
        <div class="nav_sel">
            <a href="#" class="sel" style="background-color: aqua;">1</a>
            <a href="#" class="sel" style="background-color: rgb(0, 255, 157);">2</a>
            <a href="#" class="sel" style="background-color: aqua;">3</a>
            <a href="#" class="sel" style="background-color: rgb(0, 255, 157);">4</a>
            <a href="#" class="sel" style="background-color: aqua;">5</a>
        </div>
    </body>
    
    </html>

### 测试的样式： ###

我这里将页面以750px为设计稿，并通过媒体查询设置宽度不超过750px。

@media screen and (min-width:750px){
        html{
            font-size: 75px !important;
        }
    }
    body{
        min-width: 320px;
        max-width: 750px;
        width: 10rem;
        margin: 0 auto;
        line-height: 1.5;
        background: black;
    }
    .header{
        position: relative;
        width: 10rem;
        height: 1.2rem;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background: burlywood;
    }
    .left{
        width: 2rem;
        height:1.2rem;
        background: blue;
        float: left;
    }
    .center{
        flex: 1;
        width: 6rem;
        height:1.2rem;
        background: chartreuse;
        float: left;
    }
    .right{
        width: 2rem;
        height:1.2rem;
        background: blue;
        float: left;
    }
    .banner{
        width: 10rem;
        height: 4rem;
        background: pink;
    }
    .nav_sel{
        width: 10rem;
        height:4rem;
        background: orange;
    }
    .sel{
        width: 2rem;
        height:2rem;
        float: left;
        text-align: center;
    }

从我的css样式可以看到，我把body节点下的width设置为了10rem，这是为什么呢？原因是flexible.js将屏幕分成了10等份，而1等份就是等于1rem。所以10rem就是100%的屏幕宽度。

### 效果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTA5NzQ2_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTA5NzQ2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210706134048192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTA5NzQ2,size_16,color_FFFFFF,t_70
[http_necolas.github.io_normalize.css]: http://necolas.github.io/normalize.css/
[https_github.com_amfe_lib-flexible]: https://github.com/amfe/lib-flexible
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTA5NzQ2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200609220311570.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTA5NzQ2,size_16,color_FFFFFF,t_70