二、工具

rem单位代表的是根节点的font-size大小所以当我们在页面上使用rem去替代px的时候就可以通过修改根节点font-size的值动态地让页面上的元素根据不同浏览器宽高下去实现变化。

二、工具

作用在编译打包代码的时候帮助我们把页面上的px单位转化为rem单位。

因为设计图一般是给一个固定的尺寸所有元素都统一以px为单位提供所以一般情况下我们为了尽可能还原设计图都一一对应地按同样的数值去实现页面最后为了高效率自动化地将对应的px都转化为rem所以我们必须使用这款插件。

2.flexible.js

作用根据浏览器的可视窗口大小动态地去设置根节点font-size的值也就是rem的基准值。

实现各元素根据不同屏幕大小与设计图的宽高比例进行动态地放大缩小。

(function

doc.querySelector(meta[nameviewport])var

flexibleEl

doc.querySelector(meta[nameflexible])var

dpr

{console.warn(将根据已有的meta标签来设置缩放比例)var

match

no-useless-escape.match(/initial\-scale([\d\.])/)if

(match)

flexibleEl.getAttribute(content)if

(content)

content.match(/initial\-dpr([\d\.])/)//

no-useless-escapevar

content.match(/maximum\-dpr([\d\.])/)if

(initialDpr)

win.navigator.appVersion.match(/android/gi);var

isIPhone

win.navigator.appVersion.match(/iphone/gi)var

devicePixelRatio

dpr}docEl.setAttribute(data-dpr,

dpr)if

doc.createElement(meta)metaEl.setAttribute(name,

viewport)metaEl.setAttribute(content,

initial-scale

{docEl.firstElementChild.appendChild(metaEl)}

else

doc.createElement(div)wrap.appendChild(metaEl)doc.write(wrap.innerHTML)}}function

refreshRem()

docEl.getBoundingClientRect().widthif

(width

rem}win.addEventListener(resize,function

300)},false)win.addEventListener(pageshow,function

(e)

{doc.addEventListener(DOMContentLoaded,function

dpr

px},false)}refreshRem()flexible.dpr

win.dpr

把以上工具都准备好之后便可以通过以下的方式在项目中实现响应式。

1.首先是postcss-pxtorem当我们把依赖写进package.json之后只需要npm

install便可以将所需插件代码安装到项目当中。

最后在项目根目录中创建**.postcss.js**文件填写以下内容即可全局转化px单位。

可以看到以下得代码中只有一行关键的配置那就是rootValue这个参数。

我们应该按照根目录结点的font-size值去填写该值一般情况下配置flexible插件这个值就是将设计图的分辨率/10得出来的结果。

https://github.com/michael-ciniawsky/postcss-load-configmodule.exports

{plugins:

}2.第二步在main.js全局引入flexible.js文件全局监听屏幕宽高动态设置根结点font-size大小。

main.js

/utils/flexible3.设置完前面两步在写页面的时候只需要按照设计图的尺寸去编写页面。

四、问题

如果需要设置特定的文件夹目录下的文件则需要在postcss.js中添加正则代码。

以下方式是可以设置让pxtorem作用到某个具体的文件夹。

需要注意的是这种方式只使用与pxtorem插件像px2rem这种类似的插件是没有这个功能的。

https://github.com/michael-ciniawsky/postcss-load-configmodule.exports

{postcss-pxtorem:

需要过滤掉后台的所有页面单独对前台的页面进行单位转换exclude:

(e)

(/src(\\|\/)workplace/i.test(e)){return

false}return