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

  • 北京增值税发票勾选认证平台
  • 税务硕士是什么学位类别
  • 交易性金融资产的账务处理
  • 研发设备可以一次性扣除吗
  • 个体每月开票超10万
  • 资产负债表中应付职工薪酬是负数
  • 代收款需要开票吗
  • 管理费用贷方余额借方是负数怎么结转
  • 网银盾属于什么费用
  • 没有签订购销合同的协议
  • 可供出售权益工具投资公允价值的增加
  • 原材料暂估少了如何调整
  • 去年房租忘记摊销怎么办
  • 跨年发票作废时间有限制吗
  • 集团内部资产划转需要交增值税吗
  • 没收入就没附加税么?
  • 金税盘里的增值税怎么算
  • 卖仪表赚钱吗
  • 个税和实发不一样
  • 企业捐赠现金支出应在哪个项目反应
  • 公司缴纳递延所得税吗
  • 企业没有进项票只有成本票
  • 委托发行股票会亏本吗
  • 一般纳税人开出普票可以抵扣吗
  • 电脑pin码忘了开不了机,且鼠标失灵
  • 子公司接受母公司捐赠的会计处理
  • mediacachefiles什么意思
  • php中ajax
  • php imagestring
  • arcgis图案填充
  • 购车发票遗失了能否去4s店里补开
  • 企业所得税季度预缴是什么意思
  • 大雾笼罩的早晨
  • 长期股权投资实现净利润计入什么科目
  • 猿猴的作文
  • 企业所得税如何计算应纳税所得额
  • 应付未付的工资属于负债吗
  • 华为mate主题
  • 旅游服务发票可以抵税吗
  • 其他综合收益核算的是企业根据企业会计准则
  • 民间非营利组织会计账务处理
  • 发票升位需要什么资料
  • powerdesigner生成pdm
  • 支付宝企业账户怎么注销
  • 财务会计和预算会计金额可以不等吗
  • 固定资产盘盈为什么计入盈余公积
  • 劳务费发票是个人的吗
  • 企业年金个人和公司缴费比例
  • 金蝶软件中怎么让以前年度损益调整在利润表中取不到数
  • 建设单位支付给施工单位的民工工资
  • 企业减资要交税嘛
  • 疫情防控重点保障物资免征增值税
  • 建筑工程公司需要哪些资质证书
  • 17增值税发票怎么抵扣
  • 劳务支出如何做账
  • 计提坏账准备不属于企业的或有事项
  • 享受研发费用加计扣除需要什么条件
  • 年度损益调整的会计分录
  • 成本核算方法是移动加权平均法吗
  • 应交税费对应的会计科目
  • 成本核算应设置哪些会计账户
  • win8怎么没有我的电脑
  • win10系统的邮件和日历跟outlook一样嘛
  • win8系统安装步骤
  • windows8安装密钥永久
  • win10怎么进去
  • win8右边栏设置
  • win10系统无法运行海岛大亨5
  • windows 10 build 21382
  • 图片加载完成再加载
  • bootstrap模态框按钮无响应
  • Javascript之BOM(window对象)详解
  • nodejs中的事件循环的执行顺序
  • dos内部命令大全
  • 多了一个本地磁盘
  • jquery动画效果代码
  • python单链表输出1到10
  • 扣税1.5万
  • 一般纳税人开增值税专票几个点
  • 运输企业定额发票是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设