华为商城的网站建设,室内设计意向图网站,塘沽吧,北京工程建设合同备案网站一、原理
rem单位代表的是根节点的font-size大小#xff0c;所以当我们在页面上使用rem去替代px的时候#xff0c;就可以通过修改根节点font-size的值#xff0c;动态地让页面上的元素根据不同浏览器宽高下去实现变化。
二、工具
1.postcss-pxtorem
作用#xff1a;在编…一、原理
rem单位代表的是根节点的font-size大小所以当我们在页面上使用rem去替代px的时候就可以通过修改根节点font-size的值动态地让页面上的元素根据不同浏览器宽高下去实现变化。
二、工具
1.postcss-pxtorem
作用在编译打包代码的时候帮助我们把页面上的px单位转化为rem单位。因为设计图一般是给一个固定的尺寸所有元素都统一以px为单位提供所以一般情况下我们为了尽可能还原设计图都一一对应地按同样的数值去实现页面最后为了高效率自动化地将对应的px都转化为rem所以我们必须使用这款插件。
依赖使用该插件所需要的几个依赖。
2.flexible.js 作用根据浏览器的可视窗口大小动态地去设置根节点font-size的值也就是rem的基准值。实现各元素根据不同屏幕大小与设计图的宽高比例进行动态地放大缩小。
(function (win, lib) {var doc win.documentvar docEl doc.documentElementvar metaEl doc.querySelector(meta[nameviewport])var flexibleEl doc.querySelector(meta[nameflexible])var dpr 0var scale 0var tidvar flexible lib.flexible || (lib.flexible {})if (metaEl) {console.warn(将根据已有的meta标签来设置缩放比例)var match metaEl.getAttribute(content)// eslint-disable-next-line no-useless-escape.match(/initial\-scale([\d\.])/)if (match) {scale parseFloat(match[1])dpr parseInt(1 / scale)}} else if (flexibleEl) {var content flexibleEl.getAttribute(content)if (content) {// eslint-disable-next-line no-useless-escapevar initialDpr content.match(/initial\-dpr([\d\.])/)// eslint-disable-next-line no-useless-escapevar maximumDpr content.match(/maximum\-dpr([\d\.])/)if (initialDpr) {dpr parseFloat(initialDpr[1])scale parseFloat((1 / dpr).toFixed(2))}if (maximumDpr) {dpr parseFloat(maximumDpr[1])scale parseFloat((1 / dpr).toFixed(2))}}}if (!dpr !scale) {// var isAndroid win.navigator.appVersion.match(/android/gi);var isIPhone win.navigator.appVersion.match(/iphone/gi)var devicePixelRatio win.devicePixelRatioif (isIPhone) {// iOS下对于2和3的屏用2倍的方案其余的用1倍方案if (devicePixelRatio 3 (!dpr || dpr 3)) {dpr 3} else if (devicePixelRatio 2 (!dpr || dpr 2)) {dpr 2} else {dpr 1}} else {// 其他设备下仍旧使用1倍的方案dpr 1}scale 1 / dpr}docEl.setAttribute(data-dpr, dpr)if (!metaEl) {metaEl doc.createElement(meta)metaEl.setAttribute(name, viewport)metaEl.setAttribute(content, initial-scale scale , maximum-scale scale , minimum-scale scale , user-scalableno)if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(metaEl)} else {var wrap doc.createElement(div)wrap.appendChild(metaEl)doc.write(wrap.innerHTML)}}function refreshRem() {var width docEl.getBoundingClientRect().widthif (width / dpr 540) {width width * dpr}var rem width / 10docEl.style.fontSize rem pxflexible.rem win.rem rem}win.addEventListener(resize,function () {clearTimeout(tid)tid setTimeout(refreshRem, 300)},false)win.addEventListener(pageshow,function (e) {if (e.persisted) {clearTimeout(tid)tid setTimeout(refreshRem, 300)}},false)if (doc.readyState complete) {doc.body.style.fontSize 12 * dpr px} else {doc.addEventListener(DOMContentLoaded,function () {doc.body.style.fontSize 12 * dpr px},false)}refreshRem()flexible.dpr win.dpr dprflexible.refreshRem refreshRemflexible.rem2px function (d) {var val parseFloat(d) * this.remif (typeof d string d.match(/rem$/)) {val px}return val}flexible.px2rem function (d) {var val parseFloat(d) / this.remif (typeof d string d.match(/px$/)) {val rem}return val}
})(window, window[lib] || (window[lib] {}))
三、实现方式
把以上工具都准备好之后便可以通过以下的方式在项目中实现响应式。
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: {postcss-import: {},postcss-url: {},// to edit target browsers: use browserslist field in package.jsonautoprefixer: {},postcss-pxtorem: {rootValue: 136.6,}}
}2.第二步在main.js全局引入flexible.js文件全局监听屏幕宽高动态设置根结点font-size大小。
main.js
import /utils/flexible3.设置完前面两步在写页面的时候只需要按照设计图的尺寸去编写页面。
四、问题
如果需要设置特定的文件夹目录下的文件则需要在postcss.js中添加正则代码。以下方式是可以设置让pxtorem作用到某个具体的文件夹。需要注意的是这种方式只使用与pxtorem插件像px2rem这种类似的插件是没有这个功能的。
// https://github.com/michael-ciniawsky/postcss-load-configmodule.exports {postcss-pxtorem: {rootValue: 136.6,propList: [*],// 需要过滤掉后台的所有页面单独对前台的页面进行单位转换exclude: (e) {if (/src(\\|\/)workplace/i.test(e)){return false}return true},}}
}
