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

  • 小米手机触屏震动哪里关闭(小米手机触屏震动哪里开启)

    小米手机触屏震动哪里关闭(小米手机触屏震动哪里开启)

  • 手机wps怎么自动生成目录页呢(手机wps怎么自动生成目录)

    手机wps怎么自动生成目录页呢(手机wps怎么自动生成目录)

  • 微信接不到语音通话和视频是怎么回事呢(微信接不到语音电话 过后只能收到未接提醒)

    微信接不到语音通话和视频是怎么回事呢(微信接不到语音电话 过后只能收到未接提醒)

  • 荣耀10卡槽打不开(荣耀十卡槽插不出来怎么办)

    荣耀10卡槽打不开(荣耀十卡槽插不出来怎么办)

  • 微信怎么查单向好友(微信怎么查单向删除好友)

    微信怎么查单向好友(微信怎么查单向删除好友)

  • 华为jkm一al00b是华为什么型号(华为jkm-al00b是什么型号多少钱)

    华为jkm一al00b是华为什么型号(华为jkm-al00b是什么型号多少钱)

  • WPS图片怎么居中(wps图片怎么居中在整个页面最中间)

    WPS图片怎么居中(wps图片怎么居中在整个页面最中间)

  • 苹果4g信号满格网速很慢(苹果4g信号满格但网速太慢)

    苹果4g信号满格网速很慢(苹果4g信号满格但网速太慢)

  • 私密号码是什么意思(未知归属地的私密号码是什么)

    私密号码是什么意思(未知归属地的私密号码是什么)

  • win12什么时候发布的(windows什么时候发布)

    win12什么时候发布的(windows什么时候发布)

  • 手机号没交费变空号怎么办(手机号没交费变空号会影响以后贷款吗)

    手机号没交费变空号怎么办(手机号没交费变空号会影响以后贷款吗)

  • pot-al00是什么型号(pot-al00a什么手机)

    pot-al00是什么型号(pot-al00a什么手机)

  • 美团众包骑手和专送骑手的区别(美团众包骑手和乐跑骑手的区别)

    美团众包骑手和专送骑手的区别(美团众包骑手和乐跑骑手的区别)

  • macbook休眠后唤醒一直转圈(macbook睡眠后唤醒屏幕不会亮)

    macbook休眠后唤醒一直转圈(macbook睡眠后唤醒屏幕不会亮)

  • k歌红包怎么没了(k歌红包没领完可以退回来嘛)

    k歌红包怎么没了(k歌红包没领完可以退回来嘛)

  • 腾讯视频怎么开3d效果(腾讯视频怎么开VIP便宜)

    腾讯视频怎么开3d效果(腾讯视频怎么开VIP便宜)

  • hdmiout是什么意思(out hdmi)

    hdmiout是什么意思(out hdmi)

  • 新买的华为手机怎么辨别真假(新买的华为手机第一次充电的正确方法)

    新买的华为手机怎么辨别真假(新买的华为手机第一次充电的正确方法)

  • 电脑的ip地址怎么查(电脑的ip地址怎么设置才正确)

    电脑的ip地址怎么查(电脑的ip地址怎么设置才正确)

  • 手机自动回复怎么设置(手机自动回复怎么设置 微信)

    手机自动回复怎么设置(手机自动回复怎么设置 微信)

  • 手机微博背景怎么换(手机微博背景怎么变成黑色)

    手机微博背景怎么换(手机微博背景怎么变成黑色)

  • word开始选项卡介绍(word开始选项卡不能完成的设置是)

    word开始选项卡介绍(word开始选项卡不能完成的设置是)

  • 苹果8p拍照不清晰在哪调(iphone8拍照不清楚)

    苹果8p拍照不清晰在哪调(iphone8拍照不清楚)

  • amdsvm有啥用(amd svm)

    amdsvm有啥用(amd svm)

  • 360极速浏览器如何打开极速模式(360极速浏览器如何清理缓存)

    360极速浏览器如何打开极速模式(360极速浏览器如何清理缓存)

  • 前端大屏常用的几种适配方案(前端大屏常用的输入法)

    前端大屏常用的几种适配方案(前端大屏常用的输入法)

  • 动产租赁税率是多少2023
  • 比赛奖金要交税么
  • 服务费发票的税率是多少
  • 新成立的公司一般纳税人还是小规模纳税人好
  • 现金流量表中支付的税费包括哪些
  • 个人买私募基金还是买公募基金好
  • 可以不用附原始凭证的记账凭证是
  • 冲销上年计提的住房公积金怎么做账
  • 应收票据周转率高
  • 限制性股票科目
  • 暂估入库已结转怎么处理
  • 财付通-备付金账户
  • 全资子公司向母公司划转资产 土地增值税
  • 注册商标成功的标志图片
  • 调离工作岗位是什么处分
  • 小规模纳税人一年不超过多少万
  • 代理进出口公司结售汇
  • 公司向个人借款利率最高多少
  • 企业所得税收入是什么意思
  • 国家级企业孵化器是什么意思
  • 海关缴款书如何做账
  • 定额发票2019年规定
  • 收到未到期的银行承兑汇票会计分录
  • 餐费发票怎么开
  • 增值税一般纳税人是什么意思
  • 手表的发票可以报销吗
  • 应收账款年末余额过大
  • 讲课费税务发票类别
  • 分期收款计提销项税怎么算
  • 个税手续费返还政策文件
  • macbook右上角
  • 股权转让投资款怎么入账
  • 用友财务软件怎样
  • 财务预提
  • 转出未交增值税怎么算
  • php在apache中有哪些工作方式
  • 应付福利费和应付职工薪酬的关系
  • 餐饮类的增值税
  • 建造师与建筑师的区别详解
  • php xdebug配置
  • 年报写歇业 可以写多久
  • php获取当前页面url
  • 会计中利得的定义
  • 已缴纳增值税还可以退吗
  • 销货退回与折让的关系
  • 报销职工福利
  • ES + Redis + MySQL,这个高可用架构设计太顶了!
  • wordpress防盗链
  • 土石方费用入什么科目
  • 培训费怎么收取
  • 关联方计提坏账准备如何规定
  • 建筑劳务公司是什么性质
  • 以前年度损益调整怎么做账
  • 净现金流量算残值么
  • 购买办公楼分期合同
  • 损益类费用科目结转本年利润是余额结转还是发生额结转
  • 小规模纳税人季报网上申报流程
  • 电子发票开具流程?
  • 公司购买垃圾袋可以抵扣吗
  • 委托加工企业的账务处理
  • sql有哪些语句
  • sql server 2005如何使用
  • win1020h2累积更新
  • linux系统中怎么创建目录
  • linux网络接口配置命令
  • 电脑开机后出现win7画面后一直黑屏
  • opengl环境光
  • 用android做一个简单的软件
  • perl脚本教程视频
  • 批处理文件(.bat)怎么写?
  • angular.js
  • nodejs为什么性能这么好
  • vue2.x
  • node解决了什么问题
  • android broadcast
  • 增值税发票的发票号码和发票代码
  • 代扣代缴申报表 填表说明
  • 土地增值税申报流程图
  • 江苏省常州市金坛区茅山风景区
  • 金融商品转让是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设