rem布局实际上就是实现等比缩放

试想，如果我们的元素在不同的屏幕上可以按照相同的比例来进行缩放就好了。

rem的计算原理：

试想把屏幕平均分成10份，那么每一份就是1/10，我们选择每一份的大小是1rem，那么一个5*(1/10)的大小就占屏幕大小的50%，这就是rem

我们设计稿的宽度是750px，那么对于设计稿上宽度为600px的一个元素，它的rem值是怎么计算呢？

  1. 上面我们把屏幕分成了10份，屏幕宽度就是10rem
  2. 设计稿上600px元素在设计稿上占的比例是 600/750，将这个比例应用到屏幕上，屏幕的宽度是10rem，那么，这个元素在屏幕上占用的rem就是 600/750*10rem
  3. 所以，公式就是 设计稿元素尺寸/设计稿宽度*以rem为单位的屏幕宽度

一般1rem宽度，是html根字体的大小

要根据屏幕大小动态设置跟字体的大小

处理rem布局中的字体

首先针对于文字内容比较多的网页，是不适合用rem布局的，因为这时候大屏的用户可以自己选择想要更大的字体，还是更多的内容，如果使用了rem，这个效果就不可以实现了。所以像是百度知道这种都不行，一些偏向图片内容多一些的例如淘宝，就可以。

但是字体的大小和宽度是不可以用rem来确定的，字体大小和宽度不成线性关系。

解决办法：在body上做修正*

html {fons-size: width / 100}

body {font-size: 16px}

使用实例:

html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>rem布局</title>

</head>

<body>

    <noscript>开启JavaScript，获得更好的体验</noscript>

    <div class="p1">

        宽度为屏幕宽度的50%，字体大小1.2em

        <div class="s1">

            字体大小1.2.em

        </div>

    </div>

    <div class="p2">

        宽度为屏幕宽度的40%，字体大小默认

        <div class="s2">

            字体大小1.2em

        </div>

    </div>

</body>

</html>

CSS

html {

    font-size: 32px; /* 320/10 */

}/*针对320屏幕，分成10份*/

body {

    font-size: 16px; /* 修正字体大小 */

    /* 防止页面过宽 ,页面过宽的时候取780居中*/

    margin: auto;

    padding: 0;

    width: 10rem;

    /* 防止页面过宽 */

    outline: 1px dashed green;

}

/* js被禁止的回退方案 ,js被用户禁止的时候，使用媒体查询针对各个屏幕进行设置*/

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

    html {font-size: 32px}

    body {font-size: 16px;}

}

@media screen and (min-width: 481px) and (max-width:640px) {

    html {font-size: 48px}

    body {font-size: 18px;}

}

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

    html {font-size: 64px}

    body {font-size: 20px;}

}

noscript {

    display: block;

    border: 1px solid #d6e9c6;

    padding: 3px 5px;

    background: #dff0d8;

    color: #3c763d;

}

/* js被禁止的回退方案 */

.p1, .p2 {

    border: 1px solid red;

    margin: 10px 0;

}

.p1 {

    width: 5rem;

    height: 5rem;

    font-size: 1.2em; /* 字体使用em */

}

.s1 {

    font-size: 1.2em; /* 字体使用em */

}

.p2 {

    width: 4rem;

    height: 4rem;

}

.s2 {

    font-size: 1.2em /* 字体使用em */

}

js:

var documentElement = document.documentElement;

function callback() {

    var clientWidth = documentElement.clientWidth;

    // 屏幕宽度大于780，不在放大

    clientWidth = clientWidth < 780 ? clientWidth : 780;//针对例如pc这种屏幕过大的，设置宽度是780，两边居中留空白

    documentElement.style.fontSize = clientWidth / 10 + 'px';//动态设置屏幕大小除以10为根html字体大小。

}

document.addEventListener('DOMContentLoaded', callback);

window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);

步骤总结：

  1. 确定设计稿宽度，一般是750px，选取一个手机设备的宽度做基准（例如iphone6 375px, 处理好再拓展其他机型）

  2. 限制使用rem布局（因为好多大牛公司都用rem，说明还是又一定的道理的），选取一个font-size的值做基数

  3. 按照设计稿上的元素，计算每个元素在界面上的尺寸 设计稿标注尺寸/设计稿横向尺寸*10rem = 元素实际rem为单位的css尺寸， 这一步不用手动计算，可以通过postcss的px2rem插件计算。

  4. 使用js适配各种型号的设备宽度，设置到根html上

    (1),动态设置viewport的scale,

    var scale = 1/dpr; //dpr是由设备决定的设备像素比

    并动态设置meta标签中的各项的值 init-scale = maximum-scale = minimun-scale = scale

        document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximun-scale=' + scale + ', minimun-scale=' + scale + ', user-scalable=no');

    dpr = 2时， scale = 1/dpr = 0.5;

    dpr = 3时，scale = 1/dpr = 0.333...

    最后生成的标签是这样

    <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimun=0.5, user-scalable=no"></meta>

（2），动态计算font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth /10 + 'px';

这里选取将可是窗口宽度分成了10份，每份就是一个rem，所以整个屏幕就是10rem，1rem = 根html font-size的值。

<html data-dpr="2" style="font-size: 75px;">

项目连接: 点这里

rem原理的更多相关文章

  1. rem 原理与简介

    一.rem 原理与简介 字体单位:     值根据 html 根元素大小而定,同样可以作为宽度,高度等单位 适配原理:     将 px 替换为 rem,动态修改 HTML 根元素的 font-siz ...

  2. 淘宝、网易移动端 px 转换 rem 原理，Vue-cli 实现 px 转换 rem

       在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配.秉着求知的思想,今天决定对他的原理进行分析.目前网上比较主流使用的就是淘宝方 ...

  3. 单位px 转换成 rem

    <script type="text/javascript"> var oHtml = document.documentElement; getSize(); win ...

  4. Rem实现移动端适配

    移动端适配 web页面跑在手机端(h5页面) 跨平台 基于webview() 基于webkit 常见适配方法 pc端采用display:inline-block,让div盒子横着排 移动web:采用定 ...

  5. pc端与移动端适配解决方案之rem

    使用方式: 在html页面开头,引入下面的原生js代码 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'ori ...

  6. 记录近期面试题，面试总结 (从css - vue 全面面试题)

    记录近期换工作时遇到的面试题和面试题答案 css 部分 盒模型 问题:说一下 css 的盒模型 盒模型分为标准模型和怪异盒模型(IE 盒模型) 标准盒模型:盒模型的宽高只是内容(content)的宽高 ...

  7. 移动Web开发与适配笔记

    项目要是适配手机端,想透彻的把相关内容弄清楚,现在总结一下. 一.移动端开发有如下特点: 1.跑在手机端的web 页面就是h5页面 2.具有跨平台性(web 安卓 iOS都适应) 3.基于webvie ...

  8. 使用gulp构建项目

    gulp.js作为一个前端构建工具,类似于webpack.Grountjs.rollupjs,不过相对于其他几种打包工具,gulp的使用更轻量,配置更简单,打包速度更快,今天不说他们几个的区别,也不说 ...

  9. HTML5续集

    H5 input新增属性 1.color 拾色器 2.Email 电子邮件 3.tel 电话 4.datetime-local 本地日期和时间 5.range 范围 6.url 路径,地址 7.sea ...

随机推荐

  1. 编译适用于TP-Link WR703N的OpenWRT固件

    编译适用于TP-Link WR703N TP-Link MR11U 以及使用AR9331芯片组的单WAN/LAN复用口的路由. 注:刷机有风险,刷机需谨慎.一般情况下是不会失败的,若无法通过捅Rese ...

  2. jdbcTemplate学习（二）

    前面讲了增加.删除.更新操作,这节讲一下查询. 查询操作: (一)查询一个值(不需要注入参数) queryForObject(String sql, Class<T> requiredTy ...

  3. 问题：iis配置json；结果：如何配置iis支持.json格式的文件

    如何配置iis支持.json格式的文件 | 浏览:1357 | 更新:2015-04-05 11:00 | 标签:软件 1 2 3 4 5 6 7 分步阅读 现在大家在制作HTM5的一些小场景,小游戏 ...

  4. ORA-04098 trigger 'DBBJ.DB_EV_ALTER_ST_METADATA' is invalid and failed re-validation

    转自:https://blog.csdn.net/dragoo1/article/details/9411105 ORA-04098: trigger 'DBBJ.DB_EV_ALTER_ST_MET ...

  5. windows 10微软账户不能访问局域网共享，但是本地账户可以访问

    windows10有时候无法访问局域网的共享文件夹.会提示没有权限. 如果共享的文件夹已经设置为everyone,那么通常是windows 10用的是微软账户登录的. 有两个方案可以处理这种情况. 一 ...

  6. 运行shell脚本报/bin/bash^M: bad interpreter错误排查方法

    今天遇到一个奇怪的问题,从一个服务器上down下来的脚本,在本地电脑做了点修改之后,上传到另外一台服务器上来执行,就报这个错误,问度娘,是编码格式的问题,windows把sh格式的编码改成dos格式的 ...

  7. Springboot中AOP统一处理请求日志

    完善上面的代码: 现在把输出信息由先前的system.out.println()方式改为由日志输出(日志输出的信息更全面) 现在在日志中输出http请求的内容 在日志中获取方法返回的内容

  8. FTP批量下载数据文件

    包含ftp的命令脚本,建立临时文件. ::服务器连接信息 set username=root set password=root set ip=xxx.xxx.xxx.xxx set RemoteDi ...

  9. 免安装Oracle客户端使用PL/SQL连接Oracle

    只需要在Oracle下载一个叫Instant Client Package的软件就可以了,这个软件不需要安装,只要解压就可以用了,很方便,就算重装了系统还是可以用的. 下载地址:http://www. ...

  10. 仿射变换详解 warpAffine

    转自 http://www.cnblogs.com/dupuleng/articles/4055020.html 博客园 首页 新随笔 联系 管理 订阅 随笔- 1  文章- 185  评论- 14  ...