详解rem适配布局

详解rem适配布局
当今⼿机种类繁多且不说iphone系列，安卓⼿机的种类已经数不胜数了，所以不可能每⼀款⼿机都要写⼀套布局样式，这也是不可能做到的，但是对于越来越精益求精的前端来说，当然要找到⼀个合理的解决⽅案。

rem 就是⽤来⾃适应布局的。

适配要达到的效果，如下图（简单的⽰范⼀下）
两个div不论在⼤屏还是⼩屏上都是占据屏幕的⼀半
虽然上⾯这种简单的使⽤百分⽐可以实现但是，百分⽐⽆法实现字体的⾃适应，百分⽐转换成相应的尺⼨还是很难的。

接下来就说说这次我们的主⾓rem （我们⼀般只适配宽度）
rem 原理解析
⾸先rem是⼀个相对于根元素fontSize⼤⼩的相对单位，也就是说 1rem 等于 html 的 fontSize ⼤⼩，接下来我们只需要改变html 元素的 fontSize 就可以控制 rem 的⼤⼩。

接下来我们怎么适配不同的屏幕呢，只要我们做到屏幕宽度越⼤ 1rem 表⽰的px值越⼤及HTML的fontSize值越⼤，也就是说 HTML的fontSize要于屏幕的宽度成正⽐。

再说⼀下⼀些概念设备像素⽐、设备物理像素、设备独⽴像素（有时也说是虚拟像素）
设备像素⽐ = 设备物理像素 / 设备独⽴像素
设备物理像素：设备上显⽰的最⼩单位
设备独⽴像素：独⽴于设备的⽤于逻辑上衡量像素的单位（css尺⼨）。

就拿iphone6/7/8 做说明iphone6/7/8的物理像素是750，是设备的实际尺⼨，⽽px是是设备独⽴像素单位，iphone6/7/8是2倍屏，它的css尺⼨就是 375，设备像素⽐是设备出⼚时已经设置好的。

那么我们怎么实现适配？
这就⽤到最流⾏的rem了
rem的实现⽅案
⾸先、根据不同屏幕的设备物理像素，要跟html元素的fontSize设置不同的px⼤⼩
1、媒体查询
html{
font-size:16px;
}
@media screen and (min-width:240px) {
html {
font-size:9px;
}
}
@media screen and (min-width:320px) {
html {
font-size:12px;
}
}
@media screen and (min-width:375px) {
html{
font-size:14.0625px;
}
}
利⽤@media screen and (min-width:XXX)来判断设备的尺⼨，进⽽设置html的fontSize
2、js设置html的fontSize（⽹易⽅案）
function setRem () {
let htmlRem = document.documentElement.clientWidth
document.documentElement.style.fontSize = htmlRem/7.5 + 'px'
}
setRem()
以上代码是以iphone6为设计稿，结果是1rem=100px的实际像素，因为iphone6的设备像素⽐是2所以1rem在浏览器的预览中是50px，也就是实现了1rem和设备宽度成7.5倍的关系，设备宽度改变1rem的实际⼤⼩也会改变，⽽且在屏幕中的⽐例是没有变的。

（市⾯上⼤多数是这种⽅案）
3、使⽤vw、vh
html{
font-size: 10vw
}
vw、vh是新的⼀种相对单位是把可视区域分的宽⾼为100份类似于百分⽐布局，这种⽅案它不⽤去写js，不过兼容性有点差下⾯附上vw、vh兼容性的表
每篇⼀省 rem是相对于根元素的fontSize，所以所有努⼒就是设置根元素的fontSize与设备宽度成正⽐
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。