利用rem实现h5自适应

小鱼儿 2022-06-17 05:44 367阅读 0赞

# 利用rem实现h5自适应 #

最近做h5比较多，从老大那里学到一招，超级实用。快速h5像素级切图，不用在费力地计算rem值啦。

## [REM][] ##

css中的[rem][REM] 可以让文字根据根节点`html`的`font-size`属性来计算像素值。  
例如：

html{ font-size:10px; }
    .div{ height:1rem; }

这里的`1rem` 为`10px`，以此类推，`1.5rem` 为`15px`  
总结的转换公式 为：  
(*n*)rem =( rootFontSize \* *n*)px

## 自适应函数 ##

一张设计图要去适应不同的屏幕尺寸，网页就要设置不同的字体基值。  
示例：  
如果设计图页面的宽度是640，则在页面中添加如下代码。

setAdaption(6.4);

`selfAdaption` 实现代码如下:

[window.devicePixelRatio][]

> window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。  
> 公式表示就是：window.devicePixelRatio = 物理像素 / dips

[Element.getBoundingClientRect()][Element.getBoundingClientRect] 方法返回元素的大小及其相对于视口的位置。

## [SASS][] ##

使用sass可以更好的计算`rem`

设计图中`banner` 的高宽，是640\*401,那么我们只需要给`banner`设置 设计图中实际的高宽 就可以了。  
![这里写图片描述][SouthEast]

sass 文件如下：

$baseFontsize:100px; /*设置为100px 为了更方便计算*/
    //function
    @function px2rem($pixel) { /*像素值转rem值*/
      @if (unitless($pixel)) {
        $pixel: $pixel*1px;
      }
      @return $pixel/$baseFontsize *1rem;
    }
    //mix
    @mixin bgs($url){ /*设置背景*/
      background-image: url($url);
      -webkit-background-size:100%;
      background-size:100%;
    }
    /*设置一个banner的高宽*/
    .banner { @include bgs('/res/images/activities/daimeiLive/bar.png'); height: px2rem(401); width: px2rem(640); }

`sass`编译成`css`的结果为：  
![得到的结果][SouthEast 1]

## 理解 ##

我们先设定一些值。  
设计图尺寸宽：**PicWidth**;  
设计图字体基值：**PicBaseFontSize**; （即在sass中设置的`$baseFontsize` ）  
屏幕宽：**DeviceWidth**;（docEl.getBoundingClientRect().width）  
屏幕字体基值：**DeviceBaseFontSize**; （我们要设置的值`docEl.style.fontSize = deviceFontsize;//设置rem基准值`）

他们存在下面这样的关系  
![关系图][SouthEast 2]

这样就可以实现页面的自适应了，很方便。

文字太混乱了，这篇博文写得更加清晰。参考链接[移动web适配利器-rem][web_-rem]

[REM]: https://isux.tencent.com/web-app-rem.html
[window.devicePixelRatio]: http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
[Element.getBoundingClientRect]: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
[SASS]: http://sass.bootcss.com/docs/sass-reference/
[SouthEast]: /images/20220617/bafd917a710545488d18c9a8f43a1ce1.png
[SouthEast 1]: /images/20220617/6e20b88fcb4d44cbb2e94c7ce012896f.png
[SouthEast 2]: /images/20220617/1e9e7dfc99d9483f8b4c536c66359efc.png
[web_-rem]: http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/