位置: IT常识 - 正文

vue项目 移动端适配——rem(vue项目移动端怎么做适配)

编辑:rootadmin
vue项目 移动端适配——rem

推荐整理分享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的正方形。

vue项目 移动端适配——rem(vue项目移动端怎么做适配)

有了以上基本概念接下来我们进入正题。

首先,在项目中引入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就可。

本文链接地址:https://www.jiuchutong.com/zhishi/297694.html 转载请保留说明!

上一篇:uni-app,vue3接口请求封装(uni vuex)

下一篇:Javascript 模块导入导出(import export)(javascript导入包)

  • 华为nova9pro闹钟铃声怎么设置(华为nova9pro闹钟关闭)

    华为nova9pro闹钟铃声怎么设置(华为nova9pro闹钟关闭)

  • 腾讯微视能进行直播吗(微视里的腾讯视频会员怎么用)

    腾讯微视能进行直播吗(微视里的腾讯视频会员怎么用)

  • 小米10pro的屏幕刷新率是多少(小米10pro的屏幕材质)

    小米10pro的屏幕刷新率是多少(小米10pro的屏幕材质)

  • 荣耀play4pro刷新率是多少(荣耀play4pro刷屏率是多少)

    荣耀play4pro刷新率是多少(荣耀play4pro刷屏率是多少)

  • qq空间注销后还可以恢复使用吗(QQ空间注销后还有相册吗)

    qq空间注销后还可以恢复使用吗(QQ空间注销后还有相册吗)

  • 苹果手机照片怎么看详情(苹果手机照片怎么传到电脑)

    苹果手机照片怎么看详情(苹果手机照片怎么传到电脑)

  • 微信哪个旧版本可以成功登录(微信哪个旧版本没有拍一拍)

    微信哪个旧版本可以成功登录(微信哪个旧版本没有拍一拍)

  • 0x0000003b电脑蓝屏(0x00000023电脑蓝屏)

    0x0000003b电脑蓝屏(0x00000023电脑蓝屏)

  • 抖音不认证是不是就没有流量(抖音不认证是不是不能发视频)

    抖音不认证是不是就没有流量(抖音不认证是不是不能发视频)

  • 怎样彻底收不到黑名单的短信(怎样彻底收不到黑名单的短信苹果手机)

    怎样彻底收不到黑名单的短信(怎样彻底收不到黑名单的短信苹果手机)

  • 手机无法访问网络是什么原因(手机无法访问网络怎么解决)

    手机无法访问网络是什么原因(手机无法访问网络怎么解决)

  • b站大会员能多人登录吗

    b站大会员能多人登录吗

  • 京东转卖能保修吗(京东转卖保修继承)

    京东转卖能保修吗(京东转卖保修继承)

  • 苹果手机怎么把照片加密(苹果手机怎么把卡上的通讯录导入手机)

    苹果手机怎么把照片加密(苹果手机怎么把卡上的通讯录导入手机)

  • 抖音消息有已读吗(抖音消息有已读显示吗)

    抖音消息有已读吗(抖音消息有已读显示吗)

  • 反片打印是不是反面(反片打印是什么样子)

    反片打印是不是反面(反片打印是什么样子)

  • 拼多多会员名怎么看(拼多多会员名怎么修改)

    拼多多会员名怎么看(拼多多会员名怎么修改)

  • 手机qq讨论组怎么创建(手机qq讨论组怎么转让群主)

    手机qq讨论组怎么创建(手机qq讨论组怎么转让群主)

  • 抖音删作品就不被推荐了吗(抖音删作品 不利)

    抖音删作品就不被推荐了吗(抖音删作品 不利)

  • 天龙畅易阁-游戏介绍、说明等(天龙畅易阁交易平台官网)

    天龙畅易阁-游戏介绍、说明等(天龙畅易阁交易平台官网)

  • web前端是webapp吗(web前端是软件开发吗)

    web前端是webapp吗(web前端是软件开发吗)

  • 微信如何查看原图(微信如何查看原视频)

    微信如何查看原图(微信如何查看原视频)

  • aiopump能接风扇么(aiopump可以接机箱风扇吗)

    aiopump能接风扇么(aiopump可以接机箱风扇吗)

  • 访问微信朋友圈会留下足迹吗(访问微信朋友圈好友铃声有记录吗)

    访问微信朋友圈会留下足迹吗(访问微信朋友圈好友铃声有记录吗)

  • usf2.1闪存是什么(ufs2.1闪存规格略低是什么意思)

    usf2.1闪存是什么(ufs2.1闪存规格略低是什么意思)

  • win10安装软件桌面没有图标解决方法(windows10安装应用怎么到桌面)

    win10安装软件桌面没有图标解决方法(windows10安装应用怎么到桌面)

  • msmgs.exe是什么进程 有什么作用 msmgs进程查询(msmpeng.exe 是什么)

    msmgs.exe是什么进程 有什么作用 msmgs进程查询(msmpeng.exe 是什么)

  • 覆盖了Hallerbos森林地面的蓝铃花,比利时佛兰德 (© Jason Langley/plainpicture)(覆盖的盖)

    覆盖了Hallerbos森林地面的蓝铃花,比利时佛兰德 (© Jason Langley/plainpicture)(覆盖的盖)

  • 北京增值税认证平台电话
  • 国际避税地是什么
  • 营业执照丢失公示几天才能注销
  • 收到返款计入什么科目
  • 售后回租利息可以抵税吗
  • 电子承兑凭证
  • 公司购买食品如何入账
  • 单位支付给职工的一次性补助金怎么入账
  • 税金及附加包括个人所得税吗
  • 递延收益怎么入账
  • 应收账款客户少了几毛没有付怎么处理
  • 突然收到银联入账收入怎么办
  • 机构信用代码证是三证合一里的吗
  • 对公账户提取备用金可以每天提现嘛
  • 资产负债表如何调平
  • 非直系亲属继承房产后再卖掉后交税吗
  • 金税三期得死多少企业
  • 企业偷税行为
  • 生产成本的计算公式是什么
  • windows 10鼠标如何操作
  • windows为什么从7开始
  • 应交税金年终怎么计算
  • 中秋佳节发放职工福利的话语
  • 文件类型设置
  • php排队系统
  • 服务成本怎么处理
  • 和linux
  • php __destruct
  • 二手车交易税咋算
  • vb enabled
  • php yield 异步
  • 防伪税控风险纳税人
  • 个人从事生产经营
  • vue-cli typescript
  • 生产企业成本会计难吗?
  • 已经认证抵扣的发票怎么做账
  • 企业的存货采用计划成本核算的,在资产负债表日
  • 44岁就没有月经了正常吗
  • 常见反爬策略
  • 面试官问:mysql 的自增 id 用完了,怎么办?
  • 公司间代收款需要开票吗
  • 小规模纳税人附加税会计分录
  • 现金流量表本月数和本年累计数是相等的么
  • 织梦安装详细教程
  • 电子商业汇票是指
  • 建筑业成本核算表格
  • 普通发票的开具是?
  • 公司收到加盟费会计分录
  • 积分购物骗局
  • 当月发票是否需要当月支付
  • 借款后的报销流程怎么写
  • 收付转三种凭证的限制类型
  • 一般纳税人购买固定资产进项税可以抵扣吗
  • 脚手架租赁费发票内容开劳务可以吗
  • 什么是权责发生会计处理基础
  • 新建的企业
  • 新税法和新准则的关系
  • soft version
  • windows中双击硬盘驱动器图标操作的作用
  • win8系统怎么安装微信
  • win8怎么升级到win10 bios设置
  • pc版直通车
  • ubuntu16.04命令行配置静态ip
  • linux系统的基本特征
  • linux常见信号
  • linux 下MySQL服务器的启动与停止
  • 在windows xp
  • 怎么制作xp系统
  • opengl es2
  • 使用jquery插件的好处
  • websocket方法
  • Javascript在网页设计中的作用有哪些
  • 阜阳烟草证办理条件
  • 税务副处级竞争上岗笔试题
  • 出口退税函调回函时间
  • 于开年 山东省国家税务局
  • 工业生产和农业生产区别
  • 买车可以抵扣企业所得税多少
  • 宁波市国家税务局网上办税服务厅
  • 房子契税发票没给怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设