Javascript

JS代替媒体查询

联系站长 作者:web知道 来源:未知 2019-11-24 21:58 我要评论

JS代替媒体查询...

<script>
  onload = function () {
    // setHTML();
 
    // 为了在pc端更好的去调试
    onresize = function () {
      setHTML();
    }
 
    function setHTML() {
      // 基础值
      var baseVal = 100;
      // 设计稿的宽度
      var pageWidth = 640;
      // 要适配的屏幕的宽度?
      var screenWidth = document.querySelector("html").offsetWidth;
      // 要设置的fontsize
      var fontsize = screenWidth * baseVal / pageWidth;
 
      // 设置到html标签的中
      document.querySelector("html").style.fontSize = fontsize + "px";
 
    }
  }
  </script>



VUE中Rem 适配解决方案
此方案是借助两个插件,将px进行转化为rem。
 
lib-flexible 用于设置 rem 基准值。由淘宝手机前端开发团队编写的。
postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem。
一、lib-flexible 
 
Install
npm i -S amfe-flexible
 
import
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>
 
//或者
import 'amfe-flexible'; //引入rem自适应
 
二、postcss-pxtorem
 
Install
npm install postcss-pxtorem --save-dev
 
import
在vue-cli2下,根目录中的 .postcss.js (没有,就新建一个)
 
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": { // 此处为添加部分
      rootValue: 37.5, // 对应16px 适配移动端750px宽度
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    }
  }
}


 
在vue-cli3下,根目录中的 vue.config.js (没有,就新建一个)
 
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 37.5, // 换算的基数(设计图750的根字体为32)
            selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
            propList: ['*']
          })
        ]
      }
    }
  }
}
 




本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
精彩导读