移动端布局方案二:rem+flexible.js

最新推荐文章于 2024-04-29 11:17:53 发布

WLY_Unity_Unreal

最新推荐文章于 2024-04-29 11:17:53 发布

阅读量781

点赞数

分类专栏： web前端文章标签： css3 html5

本文链接：https://blog.csdn.net/Wenliuyong/article/details/107162505

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

我们通过rem+媒体查询+less布局时,需要针对一些市面上常见的屏幕尺寸做媒体查询适配,比较麻烦,这里推荐一个淘宝移动团队出的插件,它会自动设置当前屏幕宽度除以10的值作为当前html的font-size.

准备工作:

使用vscode开发,安装插件cssrem,它可以自动帮我们计算css中px值对应的rem值,只需要为它设置一个计算所需的rootFontSize即可,它会以px值除以rootFontSize对应的值来得到rem值,通常以设计稿的宽度除以10作为rootFontSize,比如这里以750px为设计稿宽度,那么rootFontSize设置为750 / 10 = 75px.

下载flexible.js文件,git地址:https://github.com/amfe/lib-flexible

新建一个index.html和css、js文件夹,在css文件夹中新建index.less.

把flexible文件夹中的index.min.js复制到js文件夹中.

下载normalize.css到css文件夹,官网:http://necolas.github.io/normalize.css/

文件目录如下:

在index.html中搭建网页框架,引入normalize.css和index.css以及flexible.js脚本:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>rem+flexible.js</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./js/index.min.js">
</head>

<body>
    <header>rem+flexible.js</header>
    <div class="content">
        <div class="item">1</div>
        <div class="item">2</div>
    </div>
</body>

</html>

在index.css中编写样式,当我们输入px值时,cssrem插件会自动提示我们可以转换的rem值,我们可以直接选中:

可以帮我们自动转为rem,index.css样式如下:

body {
    min-width: 320px;
    width: 10rem;
    margin: 0 auto;
}
header {
    width: 100%;
    height: 1.333333rem;
    background-color: #ccc;
    text-align: center;
    font-size: .4rem;
    line-height: 1.333333rem;
}
.content {
    width: 100%;
    height: 2.666667rem;
}
.item {
    float: left;
    width: 2rem;
    height: 100%;
    background-color: pink;
    font-size: 25px;
}
.item:nth-child(2) {
    float: right;
}

效果如下: