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

  • 企业收取的租金应当计入
  • 一般纳税人的进销项税怎么做分录
  • 房地产开发企业资质等级有几个
  • 企业视同销售的税法依据是什么?
  • 印花税和契税是什么意思?什么时候交?
  • 车险车船税会计分录
  • 免抵退和免退税 区别 委托
  • 押金和租金
  • 社保免征还需要申报吗
  • 建筑业确认收入的时间是按进度计量么
  • 餐费可以抵扣吗
  • 金税盘清卡时间包括15号吗
  • 税控盘丢失需要罚款吗
  • 增值税专用发票电子版
  • 销售煤炭增值税怎么算
  • 事业单位结转结余科目
  • 与成本直接相关的工资怎么会计处理?
  • 2021年路桥费抵扣最新政策
  • 进项发票账务处理
  • 关于建筑工程发包与承包下列说法正确的是
  • 普通增值税发票查询结果不一致是什么原因?
  • 发放股票股利后的未分配利润怎么算
  • 产业扶持周转金退回多久到账
  • 税务总局关于四流一致解答
  • 一次性收取的房租需要按月纳增值税吗
  • 固定资产要办理什么手续
  • php中常用的数组是什么
  • windows 10 版本 21h1
  • 技嘉主板无法安装网卡驱动
  • phpif判断语句
  • 已收到发票未认证已付款怎么做分录
  • 提前支付的费用记账
  • 单位撤销现金余额的规定
  • 苹果macOSBigSur是什么型号
  • 万年青的养殖方法和注意事项盆栽
  • 四个常见html网页乱码问题及解决办法
  • 股票的发行费用怎么入账
  • php iswriteable
  • 集成代码
  • php链式操作
  • 微信手机充值怎么自定义金额
  • 怎么编制资金平衡表格
  • fold命令 限制文件列宽
  • python读取全部文件
  • 员工辞退补偿金扣个税吗
  • 赠送顾客的商品怎么入账
  • phpcms生成html
  • sql语句字符串比较大小
  • 变更股东投资比例
  • 个体户税务分几种
  • 电子发票如何作废,具体怎么操作
  • mysql 重复记录查询
  • 金税四期讲解视频
  • 一般纳税人企业所得税税率2023
  • 其他非流动资产是会计科目吗
  • 投资收益记账
  • 三年期定期存款利率怎么算
  • 小规模纳税人建筑服务预缴增值税
  • 免征印花税的6个项目
  • 一般纳税人会计分录
  • 超市库存明细表
  • 会计报表分析的方法
  • 阿里云安装apache
  • mysql日志有哪些
  • windows怎么连无线
  • windows7如何获得正版
  • 联想lenovoideapad700-15isk
  • win7系统虚拟机
  • win8没有开始菜单 点键盘开始菜单黑屏
  • 菜单按钮是什么
  • node.js server-side
  • bat脚本自动点击按钮
  • jquery 案例
  • unity物理引擎原理
  • vue.js如何使用
  • 如何用python编写一个程序
  • unity提高渲染画质
  • 税务检查的程序
  • 再生资源税点
  • 契税纳税申报表在哪里拿
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设