标签：750 适配 js vue rem 屏幕 postcss pxtorem

解决vue移动端适配问题

目标一 、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿

目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作

1.下载postcss-pxtorem工具包

postcss-pxtorem: postcss的一个插件，主要是帮你把px转换成对应的rem；
然后：还要用js代码去动态算根目录应该有的字体大小，反正就是一段js代码去动态获取屏幕宽度！

npm i postcss-pxtorem@5.1.1 -D
这里下载这个包一定要带上版本号，否则会报错

2.在vue项目根目录下添加.postcssrc.js文件

module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 32, propList: ['*'], minPixelValue: 2 } }};

rootValue，这里就是根目录的字体大小是32px，这里为啥设置成32呢，因为一般设计稿是750，比iphone6的大一倍，所以设置成16的两倍，就是32px;proplist就是那些属性需要转换成rem，这里是全部的意思；
比如你可选择设置； propList: [‘font’, ‘font-size’, ‘line-height’, ‘letter-spacing’]
minPixelValue就是最小转换单位，这是最小转换单位是2px的意思

3.动态设置根字体大小！

在src的目录下创建一个rem文件夹，里面放一个rem.js的文件。

(function() {
    function autoRootFontSize() {
        document.documentElement.style.fontSize =        Math.min(screen.width,document.documentElement.getBoundingClientRect().width)  /  750 * 32 + 'px';
          // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单
    }
    window.addEventListener('resize', autoRootFontSize);
    autoRootFontSize();
})();

最后在vue的入口文件main.js里引入这个js文件

标签：750,适配,js,vue,rem,屏幕,postcss,pxtorem
来源： https://blog.csdn.net/lb191258514/article/details/116996696

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