rem自适应解决方案·px2rem-loader&hotcss

时间 2019-11-06

标签 rem 自适应解决方案 px2rem loader&hotcss loader hotcss 栏目 CSS 繁體版

原文原文链接

做者：codexujavascript

设计师通常只提供一套尺寸的设计稿，如何实现一套代码实现多端自适应？css

效果演示

假设一份宽度为640px(iphone5)的设计稿，一个元素宽度为:320px，经过px2rem-loader&hotcss.js实现代码只有width: 320px，就实如今任何尺寸的屏幕下都占屏幕的1/2。html

width: 320px;
height: 320px;
复制代码

上图能够看出，经过px2rem-loader自动将320px转化为8rem。java

width: 8rem;
复制代码

而hotcss.js则在html标签中添加了git

<html lang="en" data-dpr="2" max-width="540" style="font-size: 40px;">
复制代码

在head标签中添加了github

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
复制代码

当尺寸换为iphone6时，能够看到宽度依然为8rem，而实际尺寸则变为375px。npm

安装px2rem-loaderiphone

npm i px2rem-loaderspa

在style-loader、css-loader后使用px2rem-loader。scala

{
    loader: 'px2rem-loader',
    options: {
        remUnit: 40,
        remPrecision: 8
    }
}
复制代码

经过script标签或import等方式引入hotcss.js，尽可能靠前引入。

经过这样的方式，只须要一套代码，就能够实现多终端自适应，而css数值能够与设计稿保持一致。