一、为什么要使用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. Excel催化剂开源第43波-Excel选择对象Selection在.Net开发中的使用

    Excel的二次开发有一极大的优势所在,可以结合用户的交互进行程序的运行,大量用户的交互,都是从选择对象开始,用户选择了单元格区域.图形.图表等对象,之后再进行程序代码的加工处理,生成用户所需的最终结 ...

  2. [HDU4135]CO Prime(容斥)

    也许更好的阅读体验 \(\mathcal{Description}\) \(t\)组询问,每次询问\(l,r,k\),问\([l,r]\)内有多少数与\(k\)互质 \(0<l<=r< ...

  3. [leetcode] 17. Letter Combinations of a Phone Number (medium)

    递归DFS class Solution { Map<Character, String> mapping = new HashMap<>(); public List< ...

  4. [HDOJ] 1172.猜数字

    Problem Description 猜数字游戏是gameboy最喜欢的游戏之一.游戏的规则是这样的:计算机随机产生一个四位数,然后玩家猜这个四位数是什么.每 猜一个数,计算机都会告诉玩家猜对几个数 ...

  5. 如何在windows上玩转redis的最新特性？

    想要了解redis的最新特性,可是windows下的可以安装的版本最高为3.2,想要验证redis的诸如stream特性的话,就无能为力了. 解决方法之一在windows上安装虚拟机,然后再虚拟机上安 ...

  6. 给hexo添加宠物

    开始 之前在博客园上看到,公告栏里有人竟然在养鱼,觉得很好玩!一直念念不忘的,于是就想着在hexo中也来养几只,因为我用的事Next的Muse主题,所以有一个非常合适的侧边栏,先来看看效果. 点击此处 ...

  7. python课堂整理18---文件操作(下)

    一.b模式,字节方式(二进制的单位),rb wb ab f = open('test.py', 'rb', encoding = 'utf-8') 报错,因为用了b模式,就不能再指定编码格式了,已经指 ...

  8. js异步解决方法

    在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作.在服务器端,"异步模式"甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有ht ...

  9. WAMP运行原理

    Apache运行原理 Apache的诸多功能都是通过模块进行加载的,自己本身并不具备那么多功能. php文件动态网页请求原理 请求步骤: 1. 用户在浏览器中输入需要访问的网站的域名以及具体要请求的网 ...

  10. 【Mac】nsurlsessiond 后台下载问题的解决方法

    最近在使用 Mac 系统的时候,经常发现 nsurlsessiond 这个进程,一直在后台下载,非常占用网速.解决方案如下: 通过终端执行下面的语句可以停止后台的自动更新: #!/bin/sh lau ...