位置: IT常识 - 正文
推荐整理分享vue项目 移动端适配——rem(vue项目移动端怎么做适配),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:vue项目移动端去除标题,vue项目移动端去除标题,vue项目移动端项目实站 mock数据,vue项目移动端配置rem,vue项目移动端顶部搜索导航栏固定定位,vue项目移动端适配,vue项目移动端怎么做适配,vue项目移动端商城,内容如对您有帮助,希望把文章链接给更多的朋友!
做移动端的适配我们就是要考虑,对于不同大小的手机屏幕,怎么动态改变页面布局中所有盒子的宽度高度、字体大小等。
这个问题我们可以使用相对单位rem。
那么什么是 rem?
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。设置 html 的 font-size 属性,rem 是根据它的大小来动态变化整个项目中使用 rem 单位的元素大小。
比如说:我们设置了根元素字体大小为37.5,之后如果有一个盒子宽为75px,则,我们可以给盒子设置成2rem。
那么接下来,我们要做得就是根据屏幕大小动态改变根元素的font-size了
比如说,有一个宽高都为2rem的盒子。当在一个很小的屏幕上展示的时候,我们把font-size设置为37.5。那么这个盒子展示出来的就是75px * 75px的正方形。当在一个大屏幕上展示的时候,我们把font-size设置成75px,那么这个盒子展示出来的就是150px乘以150px的正方形。
有了以上基本概念接下来我们进入正题。
首先,在项目中引入css转rem的插件
npm i postcss-pxtorem -D在项目根目录下新建 .postcssrc.js 配置文件,配置代码如下:
module.exports = { plugins: { // flexible配置 "postcss-pxtorem": { "rootValue": 37.5, // 设计稿宽度的1/10 "propList": ["*"] // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部 } }}有了这个之后,我们就不用每次去手动计算多少px需要写成多少rem了。比如我们拿到的设计稿宽度是375px(上边代码的rootValue我们写成37.5) ,里面有一个375px*375px的正方形。我们直接写375px就行,这个插件会自动帮我们计算width和height是10rem
那么,怎么动态改变根元素的字体大小呢?
可以引入另外一个插件,lib-flexible
npm install lib-flexible --save-dev在main.js中引入
这样就可以做到不同的屏幕大小根元素font-size不同啦。 然后页面布局我们使用的又是rem单位,那么盒子大小也就不同啦。
需要注意:如果我们想写死页面中的某个长度大小,比如border-radius为1px,我们只需要使用大写的PX就可。
上一篇:uni-app,vue3接口请求封装(uni vuex)
下一篇:Javascript 模块导入导出(import export)(javascript导入包)
友情链接: 武汉网站建设