vue/h5 适配解决方案

适配

我们在开发移动端的时候,需要适配尺寸,保证每部手机能够在我们的设计稿设计下,显示完整的内容。

适配单位:rem

rem 它能够根据htmlfont-size 来确定大小
例如:

  • 如果我们html设置font-size:"64px",那么我们1rem=64px;
  • 如果我们html设置font-size:"35px",那么我们1rem=35px;

h5 插件适配

https://github.com/amfe/lib-flexible
下载,引入即可

现在比如我们的设计师给了我们的尺寸是 750px *1334px 的设计图,我们LOGO部分是: 200px宽 80px高,那么我们使用less编写css的时候

.logo{
    width:200rem/75;
    height:80rem/75;
}

这样我们就可以完成了。那么这个75我们还可以定义一个变量,则变成如下

@font-size-base: 75;

.logo{
    width:200rem/@font-size-base;
    height:80rem/@font-size-base;
}

这样我们在不同的屏幕下,都能够适配了。

vue 适配

1.lib-flexible 安装插件

npm install lib-flexible --save-dev

引入插件,在 src下的main.js引入

import 'lib-flexible';

2.安装px转换,如果你不想使用less转换的话,你还可以使用插件自动转换

npm install postcss-pxtorem --save-dev

3.配置vue选项

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({ // 把px单位换算成rem单位
                        rootValue: 75, // 换算的基数(设计图750的根字体为32)
                        selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                        propList: ['*']
                    })
                ]
            }
        }
    }
}

这里换算按75这个分割来分割,75是怎么算出来的呢,其实很简单,就是750px的设计稿分10分切割。如果你的设计稿是1024,那么你的切割就是102.4;其他类推

提示

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。
黑白课堂

黑白课堂

混元大罗金仙 站长创业者玉树凌风每天醒来0收入

查看更多

最新视频课程

Laravel 的 PhpSpreadsheet 包入门

ace.js 打造一款属于你的 Web 编辑器,入门文档。

wap2App 入门讲解,100%速成,全面为你讲解。

Laravel Permission 中文文档

解释 OAuth 2.0 认证 和使用场景说明

Laravel 之 horizon 队列管理界面系统

钻级赞助商