vue移动端适配

最新推荐文章于 2023-11-09 15:50:51 发布

freewlt

最新推荐文章于 2023-11-09 15:50:51 发布

阅读量161

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_16672095/article/details/113759315

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

基础点：rem相对根节点<html>字体的大小。所以不用px;
根字体：<html>字体的大小px;
px：你就当成cm(厘米)这样的东西吧；
基准：750设计稿；

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

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

为什么选择rem?
很久之前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性>vw的兼容性；
还有一种就是自己写百分比很不优雅

作者：_双眸
链接：https://www.jianshu.com/p/2a091bd289ba
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

准备主要工具

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

vue-cli: 用这个主要是用webpack,这个构建工具大大降低了webpack的使用难度;快速构建出一个前端项目。

postcss: 官网解释：PostCSS is a tool for transforming styles with JS plugins，就是postcss用js插件帮你转换css样式的一个工具。比如，这里的把你的文件里面16px替换成1rem(根大小默认16px的情况）；这样你就不用自己去算了！

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

rem

第一步，先用vue-cli快速构建出一个项目，然后，安装postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url；

第二步，在项目根目录下添加.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的意思；

第三步，动态设置根字体大小！一段简单的js插入在head里面；

(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();
})();