rem布局方案二：flexible.js

简洁高效的rem适配方案flexible.js

  • 手机淘宝团队出的简洁高效移动端适配库
  • 我们再也不需要在写不同屏幕的媒体查询,因为里面js做了处理
  • 它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。
    我们要做的,就是确定好我们当前设备的html文字大小就可以了
  • 下载地址：https://github.com/amfe/lib-flexible

[比如]当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/ 10)就可以里面页面元素rem值:页面元素的px值/ 75
剩余的,让flexiblejs来去算

实现详情

1.下载flexible.js放到项目目录里去

│  index.html
│
├─css
│      index.css
│      normalize.css
│
├─images
└─js
        flexible.js

2.引入flexible.js

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入我们的flexible.js 文件 -->
    <script src="js/flexible.js"></script>
    <title>Document</title>
</head>

index.css

body {
    min-width: 320px;
    max-width: 750px;
    /* flexible 给我们划分了 10 等份,所以应该是10rem */
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #f2f2f2;
}

3.效果：把窗口切换成不同尺寸html的font-size会自动计算：宽度/10

在这里插入图片描述

posted @ 2020-10-30 09:14  晨光曦微  阅读(763)  评论(0)  编辑  收藏  举报