vue 开发H5适配方案

2022-08-18 14:30:38 阅读：155 来源： 互联网

标签：vue 视窗适配 px H5 clientWidth rem var postcss

一、通过JS实现适配

　　1、清除浏览器默认样式

　　　　创建reset.css，在main.js中importreset.css

　　2、实现页面自适应（rem方式在750下1rem=100px），在index.html文件中进行配置

　　　　<script>
　　　　　　(function () {
     　　　　　　// 在标准 375px 适配下，100px = 1rem;
      　　　　　　var baseFontSize = 100;
      　　　　　　var baseWidth = 375;

      　　　　　　var set = function () {
        　　　　　　　var clientWidth = document.documentElement.clientWidth || window.innerWidth;
        　　　　　　　var rem = 100;
        　　　　　　　　if (clientWidth != baseWidth) {
          　　　　　　　　　　rem = Math.floor(clientWidth / baseWidth * baseFontSize);
       　　　　　　　　}

        　　　　　　　　document.querySelector('html').style.fontSize = rem + 'px';
     　　　　　　}
      　　　　　　set();

      　　　　　　window.addEventListener('resize', set);
    　　　　　　}());
　　　　　　　export default {
　　　　　　　　name: 'App',
　　   　　　　}
　　　　　</script>

二、通过postcss插件实现

　　1、安装postcss-loader

　　　　npm i postcss-loader --save-dev

　　2、安装postcss-px-to-viewport

　　　　npm install postcss-px-to-viewport --save-dev

　　3、配置.postcssrc.js(如果没有该文件，在项目下新建一个)

　　　　module.exports = {
　　　　"plugins": {
     　　　　 "postcss-import": {},
     　　　　 "postcss-url": {},
      　　　　"postcss-px-to-viewport": {
          　　　　viewportWidth: 750,     // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
          　　　　viewportHeight: 1334,    // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
          　　　　unitPrecision: 3,       // 指定`px`转换为视窗单位值的小数位数
          　　　　viewportUnit: 'vw',     // 指定需要转换成的视窗单位，建议使用vw
          　　　　selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
          　　　　minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
          　　　　mediaQuery: false       // 允许在媒体查询中转换`px`
      　　　　},
      　　　　"cssnano": {
          　　　　preset: "advanced",
          　　　　autoprefixer: false,
          　　　　"postcss-zindex": false
      　　　　}
　　　　}
　　　}

标签：vue,视窗,适配,px,H5,clientWidth,rem,var,postcss
来源： https://www.cnblogs.com/vofill/p/16598577.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue 开发H5适配方案