关于rem移动端适配

关于rem适配

适配对于我，比较头痛，发现自己在项目中用的那套方式，不方便计算且有点不精准。(也许没有正确使用)， 大神朋友推荐了其它方式， 一起来测试吧。。。

测试了以下方式

方式一： 设置根字号 + 媒体查询

方式二： 使用 JS 计算（方便）

方式三： 使用 flexible.js

方式一： 设置根字号 + 媒体查询

* 首先 设置 html 根据号 （自定义）
* 定义媒体查询： 根据不同尺寸计算字号

初始化

// 1. 这里以 12px 作为根字号
// 2. 360宽度的 13.5是如何计算的呢？
【360当前屏 / 320最小屏 * 12根字号】 以此类推

html {
font-size: 12px;
}

@media only screen and (min-width: 320px) {
html{
font-size: 12px;
}
}

@media only screen and (min-width: 360px) {
html {
font-size: 13.5px !important;
}
}

@media only screen and (min-width: 375px) {
html {
font-size: 14.0625px !important;
}
}

@media only screen and (min-width: 400px) {
html {
font-size: 15px !important;
}
}

@media only screen and (min-width: 412px) {
html {
font-size: 15.45px !important;
}
}

@media only screen and (min-width: 414px) {
html {
font-size: 15.525px !important;
}
}

@media only screen and (min-width: 640px) {
html {
font-size: 24px !important;
}
}

使用

1.  ps: 某元素测量 高度为90px
2.  计算： 90 / 2(设计稿2倍图) / 12根字号
// 除 2 要根据设计稿，
【我这次项目中 750设计稿，计算不太准， 也许跟 除2倍图有关系】

方式二： 使用 JS 计算（方便）

<script>
window.onload = function () {
window.onresize = function () {
getRem(750, 100)
}

function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
console.log(oWidth)
html.style.fontSize = oWidth / pwidth * prem + "px";
console.log(html.style.fontSize = oWidth / pwidth * prem + "px")
}
/*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
getRem(750, 100)
}
</script>

方式三： 使用 flexible.js

下载flexible.js

根据设计稿， 定义变量 rem值

使用： 元素值 / 定义变量

@r: 75rem;

// 测量值 / 设置rem变量
.wrap {
height: 100 / @r;
}

Demo图



| ps: 个人比较喜欢 第二种方式， 实际项目中使用过第一种， 其它两种写了测试Demo, 感谢朋友指导， 望请各位大神指教更好的方式。。。