rem原理
rem布局实际上就是实现等比缩放
试想，如果我们的元素在不同的屏幕上可以按照相同的比例来进行缩放就好了。
rem的计算原理：
试想把屏幕平均分成10份，那么每一份就是1/10，我们选择每一份的大小是1rem，那么一个5*(1/10)的大小就占屏幕大小的50%，这就是rem
我们设计稿的宽度是750px，那么对于设计稿上宽度为600px的一个元素，它的rem值是怎么计算呢？
- 上面我们把屏幕分成了10份，屏幕宽度就是10rem
- 设计稿上600px元素在设计稿上占的比例是 600/750，将这个比例应用到屏幕上，屏幕的宽度是10rem，那么，这个元素在屏幕上占用的rem就是 600/750*10rem
- 所以，公式就是 设计稿元素尺寸/设计稿宽度*以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);
步骤总结：
确定设计稿宽度，一般是750px，选取一个手机设备的宽度做基准（例如iphone6 375px, 处理好再拓展其他机型）
限制使用rem布局（因为好多大牛公司都用rem，说明还是又一定的道理的），选取一个font-size的值做基数
按照设计稿上的元素，计算每个元素在界面上的尺寸 设计稿标注尺寸/设计稿横向尺寸*10rem = 元素实际rem为单位的css尺寸， 这一步不用手动计算，可以通过postcss的px2rem插件计算。
使用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原理的更多相关文章
- rem 原理与简介
一.rem 原理与简介 字体单位: 值根据 html 根元素大小而定,同样可以作为宽度,高度等单位 适配原理: 将 px 替换为 rem,动态修改 HTML 根元素的 font-siz ...
- 淘宝、网易移动端 px 转换 rem 原理，Vue-cli 实现 px 转换 rem
在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配.秉着求知的思想,今天决定对他的原理进行分析.目前网上比较主流使用的就是淘宝方 ...
- 单位px 转换成 rem
<script type="text/javascript"> var oHtml = document.documentElement; getSize(); win ...
- Rem实现移动端适配
移动端适配 web页面跑在手机端(h5页面) 跨平台 基于webview() 基于webkit 常见适配方法 pc端采用display:inline-block,让div盒子横着排 移动web:采用定 ...
- pc端与移动端适配解决方案之rem
使用方式: 在html页面开头,引入下面的原生js代码 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'ori ...
- 记录近期面试题，面试总结 (从css - vue 全面面试题)
记录近期换工作时遇到的面试题和面试题答案 css 部分 盒模型 问题:说一下 css 的盒模型 盒模型分为标准模型和怪异盒模型(IE 盒模型) 标准盒模型:盒模型的宽高只是内容(content)的宽高 ...
- 移动Web开发与适配笔记
项目要是适配手机端,想透彻的把相关内容弄清楚,现在总结一下. 一.移动端开发有如下特点: 1.跑在手机端的web 页面就是h5页面 2.具有跨平台性(web 安卓 iOS都适应) 3.基于webvie ...
- 使用gulp构建项目
gulp.js作为一个前端构建工具,类似于webpack.Grountjs.rollupjs,不过相对于其他几种打包工具,gulp的使用更轻量,配置更简单,打包速度更快,今天不说他们几个的区别,也不说 ...
- HTML5续集
H5 input新增属性 1.color 拾色器 2.Email 电子邮件 3.tel 电话 4.datetime-local 本地日期和时间 5.range 范围 6.url 路径,地址 7.sea ...
随机推荐
- DCloud-HBulder：杂项
ylbtech-DCloud-HBulder:杂项 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 7.返回顶部 8.返回顶部 ...
- strcmp与strncmp的区别
================== strcmp与strncmp都是用来比较字符串的,区别在于能否比较指定长度字符串. strcmp C/C++函数,比较两个字符串 设这两个字符串为str1,s ...
- .Net 使用 GregorianCalendar 获取任意一天为一年的第几周
private static int GetWeekOfYear(DateTime dt) { GregorianCalendar gc = new GregorianCalendar(); int ...
- java中的自动转型的学习理解
java当中的继承是和c++中的继承类似,只是java中的继承时的父类只能有一位. 我们今天在这里讲的是关于java中的自动转型的理解:顾名思义,自动转型值得就是使用时自动的将自身的类型进行转化. 自 ...
- 嵌入式Linux启动优化手记2 U…
参考一下 原文地址:U-boot优化">嵌入式Linux启动优化手记2 U-boot优化作者:ZhaoJunling 既然不能使用新的U-boot,那就优化一点是一点,慢慢干吧. 1. ...
- JavaScript去除空格的三种方法(正则/传参函数/trim)
方法一: 个人认为最好的方法.采用的是正则表达式,这是最核心的原理. 其次.这个方法使用了JavaScript 的prototype 属性 其实你不使用这个属性一样可以用函数实现.但这样做后用起来比较 ...
- 基于unity3d的RRT算法路径规划
- SimpleFactoryPattern（23种设计模式之一）
设计模式六大原则(1):单一职责原则 设计模式六大原则(2):里氏替换原则 设计模式六大原则(3):依赖倒置原则 设计模式六大原则(4):接口隔离原则 设计模式六大原则(5):迪米特法则 设计模式六大 ...
- hive与hbase数据类型对应关系
hive与hbase数据类型对应关系 当hbase中double,int 类型以byte方式存储时,用字符串取出来必然是乱码. 在hivd与hbase整合时也遇到这个问题:做法是:#b 1.加#b C ...
- ZROI2018普转提day2t4
传送门 分析 考场上暴力水过好评... 然后我的st表查询似乎是log的,然后log三方跑的比log方快,qwq. 我们发现如果一个区间的最小值就是这个区间的gcd,则这个区间合法.所以我们二分区间长 ...