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

  • 华为nova10返回键在哪(华为nova10返回键怎么调出来)

    华为nova10返回键在哪(华为nova10返回键怎么调出来)

  • 腾讯视频可以手机号码登录吗(腾讯视频可以手机扫码登录吗)

    腾讯视频可以手机号码登录吗(腾讯视频可以手机扫码登录吗)

  • 苹果13有护眼模式么(苹果13护眼模式在哪里设置)

    苹果13有护眼模式么(苹果13护眼模式在哪里设置)

  • 京东寄件怎么操作(京东怎样寄东西)

    京东寄件怎么操作(京东怎样寄东西)

  • 哔哩哔哩免流失败(哔哩哔哩免流没用)

    哔哩哔哩免流失败(哔哩哔哩免流没用)

  • 淘宝换货商品属性是指已收到的商品吗(淘宝换货商品属性在哪)

    淘宝换货商品属性是指已收到的商品吗(淘宝换货商品属性在哪)

  • qq怎么删除好友同时对方也删除(qq怎么删除好友通知)

    qq怎么删除好友同时对方也删除(qq怎么删除好友通知)

  • 健康码上的信息别人能查到吗(健康码的信息可以修改吗)

    健康码上的信息别人能查到吗(健康码的信息可以修改吗)

  • 苹果8来电闪光灯不闪(苹果8来电闪光灯怎么设置不起作用)

    苹果8来电闪光灯不闪(苹果8来电闪光灯怎么设置不起作用)

  • 极米怎么退出音响模式(极米怎么退出音乐模式)

    极米怎么退出音响模式(极米怎么退出音乐模式)

  • 分享网络二维码怎么扫(分享网络二维码在哪)

    分享网络二维码怎么扫(分享网络二维码在哪)

  • 文本替换在哪个菜单栏里(文本替换是什么意思)

    文本替换在哪个菜单栏里(文本替换是什么意思)

  • 怎么关闭二维码收款功能(怎么关闭二维码亮屏)

    怎么关闭二维码收款功能(怎么关闭二维码亮屏)

  • 饿了么给异地订餐怎么弄(饿了么给异地订外卖怎么订)

    饿了么给异地订餐怎么弄(饿了么给异地订外卖怎么订)

  • ios13三指撤销怎么关闭(iphone三指轻点撤销)

    ios13三指撤销怎么关闭(iphone三指轻点撤销)

  • 虚拟化的四大特性(虚拟化的4个本质特征)

    虚拟化的四大特性(虚拟化的4个本质特征)

  • 淘宝删除的订单还能找到吗(淘宝删除的订单如何找回)

    淘宝删除的订单还能找到吗(淘宝删除的订单如何找回)

  • 怎么保存美团评价视频(怎么保存美团评论的图片)

    怎么保存美团评价视频(怎么保存美团评论的图片)

  • 为什么airpods连不上(为什么airpods连上没有声音)

    为什么airpods连不上(为什么airpods连上没有声音)

  • 怎么免费获取Win10 21H2密钥?最新win10激活码分享 附win10激活工具(怎么免费获取百度文库的付费文档)

    怎么免费获取Win10 21H2密钥?最新win10激活码分享 附win10激活工具(怎么免费获取百度文库的付费文档)

  • Win10设备配频繁蓝屏提示"CorsairVBusDriver.sys"的解决办法(windows设备超时是什么意思)

    Win10设备配频繁蓝屏提示"CorsairVBusDriver.sys"的解决办法(windows设备超时是什么意思)

  • 2017苹果助手哪个好用 苹果iphone手机助手排名推荐(iphone助手)

    2017苹果助手哪个好用 苹果iphone手机助手排名推荐(iphone助手)

  • 进口货物增值税纳税人是谁
  • 企业所得税的会计处理
  • 建筑工程劳保费返还给项目部吗
  • 外购的商誉如何做账
  • 营改增土地出租
  • 溢价发行可转换公司债券会计分录例题
  • 出差住宿普通发票进项税可以抵扣吗
  • 小微企业营业外收入税率是多少
  • 支付保险费发票怎么入账
  • 财务人员的大忌
  • 小规模纳税人网上申报流程视频
  • 跨年成本发票红冲怎么做会计分录
  • 核定应税所得税会计分录
  • 其他应收款借方表示增加吗
  • 电子承兑怎么开户
  • 无法支付的款项转销
  • 收入成本配比原则
  • 收到客户付款 会计分录
  • Win11 Build 22449.1000更新里哪些内容?Win11 Build 22449更新介绍与安装方法
  • 会计科目在建工程有金额要求吗
  • php+mysql+apache
  • 土地增值税扣除系数
  • 二手房交易需缴哪些税
  • 承接旅游业务
  • laravel 自定义类
  • php批量导入数据库
  • 发票校验码不清晰
  • 职工报销医药费属于什么会计科目
  • 为什么我们认为北京人已经学会使用火
  • 我已经用尽了洪荒之力漫画表情
  • 收到政府扶持资金
  • 前期认证相符且不符合
  • 勘察设计费是否含税
  • 软件企业会计账务处理
  • 一般纳税人企业所得税如何计算
  • 记账复核是谁
  • 自然人独资可以变更为有限责任公司
  • 进什么税额
  • phpcms插件
  • pd python
  • python调用自定义类
  • mysql临时表什么时候销毁
  • sql server ceiling
  • 业务招待费的会计处理方法
  • 附加税费用
  • 哪些情况可以开立基本账户
  • 磁盘监控命令
  • 筹资现金流量净额
  • 非限定性净资产和限定性净资产的区别
  • MySQL中使用FREDATED引擎实现跨数据库服务器、跨实例访问
  • 为什么购买办公用品
  • 成品油办法废止后,加油站还需办理成品油许可证吗
  • 支付的物业费如何做账
  • 公司卖出货物没有发票
  • 小规模纳税人转一般纳税人当月如何申报
  • 事业单位财政直拔工资误填为劳务费怎么写情况说明
  • 已认证发票红冲全流程操作
  • 电子发票能否作废
  • 应收账款周转率越高越好吗
  • 代驾服务费属于哪个税收编码
  • mysql大小
  • sql汇总查询
  • sqlserver 触发器 if 后边没执行
  • 单网卡计算机有几个网络接口
  • Win10 RedStone 2预览版14936快速版开始推送
  • linux的系统日志
  • 在Linux操作系统中哪些命令可以正确关闭系统防火墙
  • Unable to execute dex: Multiple dex files define Lorg/cocos2dx/lib/Cocos2dxAccelerometer
  • 错误日志项数
  • excel表格时间选择
  • css选择器类选择器
  • 用js获取地址栏url参数的方法
  • nodejs cli
  • python 性能
  • html购物网站
  • JavaScript弹出窗口
  • python数组定义方法
  • js如何判断输入输出
  • 贵州省电子税务局操作手册
  • 2021河南税务政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设