一、为什么要使用rem布局

前面我写了flex布局的优点，分配伸缩盒容器中子盒子占的份数及排列方式，使其不受屏幕缩放的影响，使布局变得简单。然而，在有些时候，不可避免要给盒子设置高度的值，怎么让高度也随着屏幕大小变化等比例缩放呢？另外，怎么让页面文字大小也随着屏幕的大小变化而缩放呢？rem布局就可以轻松解决这个问题。

二、rem布局的原理

1.rem

首先要了解什么是rem，rem (root em)是一个相对单位，1rem的值是页面html中font-size的大小。在布局中，我们统一使用rem作为设置宽高的基本单位，这样我们可以通过控制页面font-size的大小来使页面元素等比例缩放。

2.媒体查询和less。（less内容作为了解）

媒体查询是CSS3的新语法，使用 @media查询，可以针对不同的媒体类型定义不同的样式。在rem布局中，就是根据屏幕大小的变化，确定html中的font-size的值。

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本。

在rem布局中主要使用less文件来计算rem的值（盒子宽高的px值 / 1rem占的px值 = 宽高占的rem值）。在vscode中安装easyLess插件可以自动生成与less文件同名的css文件，在页面引入css即可。但是这样换算比较麻烦，开发中我们通常使用cssrem插件就可以替代less文件的功能了。

3.flexible.js

flexible.js就是一个封装好的js文件。将屏幕宽度除以10作为1rem的值，就不用每一个尺寸都用媒体查询判断rem值了。页面中的元素都是以rem来表示宽高的，这样随着屏幕尺寸大小的变化，页面元素也会进行缩放。

使用flexible.js后可以在vscode中安装cssrem插件，并在设置里面的cssrem中设置全局font-size的固定大小（设计稿宽度除以10），cssrem插件可以直接将你输入的页面元素大小都转化为rem值，非常好用，省去在less文件中进行计算了。

三、实例

1.实现的效果如下，我们可以发现它的元素根据页面的大小而等比例缩放。

750px屏幕下：

500px屏幕下的效果：

2.实现方法

rem布局实现方式有两种，第一种是rem+less+媒体查询，但是需要多写一个媒体查询less文件，比较麻烦，所以我们经常用第二种。第二种是rem+flexible.js，本文的案例是使用这种方式做的。

3.步骤。

准备工作：安装vscode的插件cssrem，另外在vscode设置中设置默认页面字体大小为750px / 10 = 75px。这样我们在写页面样式时候写上对应的px值，插件会直接将你输入的px值内容转换成对应的rem值，可以看到下面的代码长度的单位都是rem。

首先引入flexible.js并搭建页面结构。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>rem布局详解</title>

    <script src="js/flexible.js"></script>      <!-- 引入flexible.js根据屏幕判断1rem的值 -->

    <link rel="stylesheet" href="css/normalize.css">    <!-- 引入公用样式 -->

    <link rel="stylesheet" href="css/index.css">    <!-- 引入css样式 -->

</head>

<body>

    <header>

        <span class="classify"></span>      <!-- 左侧分类标志 -->

        <form action="">                    <!-- 中间搜索框 -->

            <input type="search" placeholder="抢购双十一">

        </form>

        <a href="#" class="login">登陆</a>   <!-- 右侧登录标志 -->

    </header>

</body>

</html>

然后书写css样式如下：

第一步，加入媒体查询条件。设置在页面大于设计稿宽度时，也按设计稿宽度设置font-size大小。html中设置的字体大小容易被覆盖，所以加上!important进行提权。

@media screen and (min-width:750px){

    html{

        font-size: 75px!important;

    }

}

第二步：body修饰。body要是10rem即设计稿宽度。然后根据屏幕缩放。

body{

    min-width: 320px;   /* 设定移动开发的页面的最大最小值的范围 */

    max-width: 750px;

    width: 10rem;       /* body是固定的10rem居中 */

    margin:0 auto;

}

第三步：header 书写，用到固定定位。

header{

    display: flex;  /* 父盒子添加伸缩盒布局属性 */

    position: fixed;

    top:;

    left:50%;

    transform: translateX(-50%);

    width: 10rem;

    height: 1.173333rem;

    background-color: #ffc001;

}

第四部：其余代码如下：

*{

    margin:;

    padding:;

}

.classify{

    width: .586667rem;

    height: .933333rem;

    background: url(../images/classify.png) no-repeat;

    background-size: .586667rem;

    margin:.146667rem .333333rem .093333rem;

}

header form{

    flex:;    /* 子盒子独占1份剩余空间 */

}

header input{

    width: 100%;

    height: .906667rem;

    margin-top: .133333rem;

    border-radius: .453333rem;

    background-color: #fff2cd;

    padding-left: .746667rem;

    font-size: .32rem;

    border: none;   /* 去除边框和轮廓线 */

    outline: none;

}

.login{

    /* display: block;  因为父盒子是伸缩盒布局，所以不需要 */

    margin: .133333rem .266667rem;

    height: .906667rem;

    line-height: .906667rem;

    font-size: .333333rem;

    color: #fff;

    text-decoration: none;

}

四：总结

rem的好处我们可以显而易见得看到了，任何长度都可以换成rem单位，这样页面元素可以随着页面大小变化进行缩放。实际开发中一般用混合式开发flex+rem模式。

轻松pick移动开发第二篇，rem布局的更多相关文章

  1. 轻松pick移动开发第一篇，flex布局

    一.什么是flex布局 首先提问一个问题,一般童鞋都会让子元素水平居中,那么怎么让子元素垂直居中呢?这里就要用到我们的flex布局了. 1.flex 是 flexible Box 的缩写,意为&quo ...

  2. iOS开发——高级技术精选&底层开发之越狱开发第二篇

    底层开发之越狱开发第二篇 今天项目中要用到检查iPhone是否越狱的方法. Umeng统计的Mobclick.h里面已经包含了越狱检测的代码,可以直接使用 /*方法名: * isJailbroken ...

  3. android 串口开发第二篇:利用jni实现android和串口通信

    一:串口通信简介 由于串口开发涉及到jni,所以开发环境需要支持ndk开发,如果未配置ndk配置的朋友,或者对jni不熟悉的朋友,请查看上一篇文章,android 串口开发第一篇:搭建ndk开发环境以 ...

  4. 微信支付之JSAPI开发-第二篇：业务流程详解与方案设计

    微信支付流程 流程: 上图的网址为:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_4 如上图所示,微信网页支付的具体流程大致分为 ...

  5. Swift开发第二篇——extension及fatalError

    本篇分两部分: 一.extension在 Swift 中的使用 二.Swift 中的 fatalError 一.extension在 Swift 中的使用 在 swift 中我们可以通过 extens ...

  6. Android Studio开发第二篇创建新项目

    创建新项目很简单,File-New-New Project,这个没什么好说的跟Eclipse都差不都. 第二步SDK选择,有手机平板还有Wear,TV,汽车Auto,谷歌眼镜等几个种平台,这里就先选择 ...

  7. PowerBI开发 第二篇：数据建模

    在分析数据时,不可能总是对单个数据表进行分析,有时需要把多个数据表导入到PowerBI中,通过多个表中的数据及其关系来执行一些复杂的数据分析任务,因此,为准确计算分析的结果,需要在数据建模中,创建数据 ...

  8. iOS开发——高级篇——流水布局UICollectionViewFlowLayout的基本使用

    之前看到过的一篇文章 对collectionView的使用总结的非常好:“iOS6新特征:UICollectionView介绍” 流水布局在现在的应用中很常见了,简单的研究了下,实现下面的功能 那我这 ...

  9. SAP web 开发 (第二篇 bsp 开发 mvc模式 Part2 )

    单击第一个图标,第一个图标突出显示,单击第二个图标,第一个变灰,第二个突出显示,反之一样.单击history读取历史记录. Controller ZCL_SUS_C_ORDER_CHANGE 1.   ...

随机推荐

  1. 字符串的排列(剑指offer)

    题目描述: 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 思路: 利用 ...

  2. <<Modern CMake>> 翻译 1. CMake 介绍

    <<Modern CMake>> 翻译 1. CMake 介绍 人们喜欢讨厌构建系统. 仅仅观看 CppCon17 上的演讲,就可以看到开发人员因为构建系统而闹笑话的例子. 这 ...

  3. Redis项目实战---应用及理论（三）---Jedis使用

    Jedis即redis java客户端,源码地址:https://github.com/xetorthio/jedis pom配置: <dependency>    <groupId ...

  4. javaweb入门--web是什么

    WEB基本概念 首先明白web是什么,人们常说的web其实就是英文中页面的意思,准确来说是Internet主机供给外界访问的资源. 站在用户视角,也就是说,通过你浏览器(客户端)的地址栏输入资源(你要 ...

  5. 【JDK】JDK源码分析-TreeMap(2)

    前文「JDK源码分析-TreeMap(1)」分析了 TreeMap 的一些方法,本文分析其中的增删方法.这也是红黑树插入和删除节点的操作,由于相对复杂,因此单独进行分析. 插入操作 该操作其实就是红黑 ...

  6. 【iOS】Updating local specs repositories

    使用 Pods 时遇到这个问题,原因是被墙了……需换成下面命令: pod install --verbose --no-repo-update

  7. 2019前端面试系列——HTTP、浏览器面试题

    浏览器存储的方式有哪些 特性 cookie localStorage sessionStorage indexedDB 数据生命周期 一般由服务器生成,可以设置过期时间 除非被清理,否则一直存在 页面 ...

  8. LASSO原作者的论文，来读读看

    Regression Shrinkage and Selection via the lasso 众所周知,Robert Tibshirani是统计领域的大佬,这篇文章在1996年提出了LASSO,之 ...

  9. Spring的数据库编程浅入浅出——不吹牛逼不装逼

    Spring的数据库编程浅入浅出——不吹牛逼不装逼 前言 上文书我写了Spring的核心部分控制反转和依赖注入,后来又衔接了注解,在这后面本来是应该写Spring AOP的,但我觉得对于初学者来说,这 ...

  10. hadoop安装解决之道

    # 壹.故障现象 ```xml Microsoft Windows [版本 10.0.18362.239] (c) 2019 Microsoft Corporation.保留所有权利. C:\User ...