位置: 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导入包)

  • 消费税的会计处理分录
  • 两个公司如何一起经营
  • 小规模差额征税全额开票和差额开票
  • 其他综合收益属于损益类科目吗
  • 外贸出口备案需准备什么资料
  • 待摊费用属于企业的费用
  • 公司的纳税信用等级对财务人员有什么影响
  • 二房东开发票交多少税
  • 个人保险发票能抵扣个税
  • 材料委托加工
  • 外地施工如何开发票
  • 退休回聘政策与程序
  • 存货成本包括消费吗
  • 有形资产包括什么资产
  • 企业存款利息收入税率
  • 摊销保险费会计分录怎么写
  • 公司贷款买车是公司还款吗
  • 长期借款按月计提
  • 一个公司只有一个财务人员,可以吗
  • 同一地级行政区怎么划分
  • 对外支付类型
  • 房地产公司销售自建房怎么纳税
  • 预交印花税会计分录
  • 累计折旧余额怎样结转
  • 专票电话写错了怎么办
  • 总公司人员可以在分公司报销费用吗
  • 旅行社小规模差额征税增值税申报表怎么填
  • 在windows7环境中鼠标主要的三种操作方式是
  • 广告费和业务宣传费
  • 账套没有以前年度调整
  • 超市发购物卡给员工会计分录
  • 在windows7中桌面指的是全部窗口
  • 腾讯电脑管家浏览器保护在哪
  • 公司开业厂商的宣传文案
  • 猜单词游戏代码
  • 如何利用命令符复制文件
  • kb4507449安装失败
  • msoxmled.exe是什么软件
  • 补充养老保险费扣除限额
  • 莱达尔湖, 英格兰坎布里亚郡湖区 (© Tranquillian1/iStock/Getty Images Plus)
  • css字体溢出
  • php十进制转二进制算法
  • javascript零基础
  • 计算机视觉:一种现代方法
  • 个人所得税现金流量表属于哪一项
  • 目标检测算法有哪些
  • nerf新手入门
  • 印花税减半征收减免性质代码
  • vue3父子组件通信
  • sql2008安装出现以下错误
  • 计提工资包含个人扣款吗
  • 货运代理费计入什么科目
  • 坏账准备的借贷方向代表什么
  • 怎么做掉公司账面库存100万
  • 福利费可以计入销售费用吗
  • 净利润递延所得税
  • 银行手续费发票未到怎样做账
  • 以前年度损益调整
  • 年报中纳税总额是本年实际缴纳的还是应纳税额
  • 可以自行开具增值税专用发票的行业有哪些
  • 资产负债表怎么算
  • sql server 判断数据是否存在
  • sql server如何远程登录
  • win 7操作系统安装
  • windows ftp软件
  • mac 应用
  • Remind_XP.exe - Remind_XP是什么进程 有什么用
  • Mac如何使用Excel
  • js获取数组元素个数
  • javascriptjs
  • 很不错的词语
  • css渐变文本效果在哪
  • 阿里面试题和答案
  • python的threading模块详解
  • 创建shell脚本命令
  • javascript有几种类型
  • javascript零基础
  • adb远程调试工具
  • 记账凭证编制的依据可以用
  • 地税局面试
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设