计算n 的值用html,前端移动端的rem适配计算原理

rem是什么？

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

计算原理：

1 屏幕宽为 clientWidth(px)。 设计稿宽度为 750 (px), 假设 n = clientWidth(px)/750(px);单位化简===> n= clientWidth/750 ;

2 将 html的 font-size: n(px);

3 则有 n(px) = 1(rem) ,因为1rem为根节点(html节点)字体的大小一倍;

4 假设有一个 div ,在设计稿测量的宽度为 ruleW(px);

5 则需要写入的宽度 width: 设为 w (单位暂不确定)

6 则有 w/clientWidth(px) = ruleW(px)/750(px) 单位化简===> w/clientWidth(px) = ruleW/750

7 化简 w = (clientWidth/750)*ruleW(px) 化简==> w = n*ruleW(px) 转换 w = ruleW * n(px)

8 最后得出 w = ruleW * 1(rem) = ruleW(rem);

结论: 当我们设置html的font-szie为 (屏幕宽度/设计稿宽度) 的px 时

当我们在设计稿上测得的 px 单位值,直接将值换为 rem单位写到代码里面即可,这点与微信小程序的 rpx 单位适配类似

问题: 上面推导完全按照 数学问题来推算,忽略了一个重要的问题,就是浏览器存在最小字体,不得小于 12px,当我们设置 font-size: n(px) ; 屏幕宽度除以750可能已经很小了,这个比例已经不太合适了,所以我们把它放大一百倍

放大比例计算规则如下:

1. n = clientWidth(px)/750(px); n2 = clientWidth(px)/7.50(px); n * 100 = n2; n2为n放大后的比例

2. 将 html的 font-size: n2(px); n2为放大后的比例

3. 则有 n2(px) = 1(rem) , n (px) * 100 = 1(rem) , n(px) = 1/100 (rem);

4 假设有一个 div ,在设计稿测量的宽度为 ruleW(px);

5 则需要写入的宽度 width: 设为 w (单位暂不确定)

6 则有 w/clientWidth(px) = ruleW(px)/750(px) ,注意这里还是除以 750, 单位化简===> w/clientWidth(px) = ruleW/750

7 化简 w = (clientWidth/750)*ruleW(px) 化简==> w = n*ruleW(px) 转换 w = ruleW * n(px)

8 最后得出 w = ruleW * 1/100(rem) = (ruleW/100)(rem)

结论: 当我们设置html的font-szie为 (屏幕宽度*100/设计稿宽度) 的px 时 当我们在设计稿上测得的 px 单位值,直接将值除以100换为 rem单位写到代码里面即可

下面给出几种适配方案：

所有的使用例子，以一个 div ，在 750 的设计稿中测的 宽度 750 px 、高度 80px 、 背景 pink

1、js适配，在html页面的 head标签内加入如下代码： (推荐)

//手机端的适配

document.addEventListener("DOMContentLoaded",function(){

document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";

});

window.onresize = function(){

document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";

}

使用

div{

height: .8rem;

width: 7.5rem;

background: pink;

}

2、css的 calc适配 (推荐)

html{

font-size: calc(100vw / 7.5);

}

使用

div{

height: .8rem;

width: 7.5rem;

background: pink;

}

3、less 适配(不是和很标准)

.re(@width) {

@xs: 100px/(750px/@width);

@media (max-width:(@width + 1px)) {

html {

font-size: @xs;

}

}

}

.re(1600px);

.re(1440px);

.re(1280px);

.re(1024px);

.re(960px);

.re(950px);

.re(900px);

.re(800px);

.re(773px);

.re(768px);

.re(736px);

.re(732px);

.re(731px);

.re(667px);

.re(640px);

.re(600px);

.re(568px);

.re(533px);

.re(435px);

.re(414px);

.re(411px);

.re(384px);

.re(375px);

.re(360px);

.re(320px);

使用：

div{

height: .8rem;

width: 7.5rem;

background: pink;

}

4、scss 适配

// 计算rem的基准字体

$rem-base-font-size: 100px;

// UI设计图的分辨率宽度

$UI-resolution-width: 750px;

// 需要适配的屏幕宽度

$device-widths: 240px, 320px, 360px, 375px, 390px, 414px, 480px, 540px, 640px, 720px, 768px,1080px, 1024px;

@mixin html-font-size() {

@each $current-width in $device-widths {

@media only screen and (min-width: $current-width) {

html {

$x: $UI-resolution-width / $current-width; //计算出是几倍屏

font-size: $rem-base-font-size / $x;

}

}

}

}

@include html-font-size();

@function pxToRem($px) {

@return $px / $rem-base-font-size * 1rem;

}

使用：

div{

height: .8rem;

width: 7.5rem;

background: pink;

}

或者：

div{

height: pxToRem(80px);

width: pxToRem(750px);

background: pink;

}

总结： 一般使用第一种，或者第二种较多，

最后 ipad 上的布局

注意：第一种，或者第二种 两种方式在 ipad上面，会出现问题，因为ipad的宽度大于高度，类似于 pc的布局。其实就是一个缩小版的pc，可以直接用 px写布局。

实际上，如果确定在 ipad 上面，就不需要再缩放了。直接还原为 pc布局，，为了同时兼容 手机端 和 ipad 。所以我们将 第一种方式修改一下

;(function(){

function loaded(){

var ua = navigator.userAgent.toLowerCase();

if(/ipad/i.test(ua)){

//是 ipad

document.getElementsByTagName("html")[0].style.fontSize="50px"; //等同于缩小一倍,这个值,自己可以调整

}else{

var width = document.documentElement.clientWidth;

document.getElementsByTagName("html")[0].style.fontSize=(width/7.50)+"px";

}

}

document.addEventListener("DOMContentLoaded",loaded);

loaded();

}());

在 ipad上面 设置 html 的字体为 50px的原因是，因为我们在移动端，设置了字体为 缩小100后的 rem。还是上面的例子：

div{

height: .8rem;

width: 7.5rem;

background: pink;

}

以宽度来解析：

实际在 ipad 中的网页呈现为   0.8 rem  =>   0.8 * 50 px = 40px;  也就是说，我原本在设计稿上测的 80px ，在 ipad上面只展示为 40px。缩小一半，因为 ipad 看上去就像是缩小版的pc。当然这个比例可以自己调整。