当前位置: 首页 > article >正文

【Uniapp-Vue3】响应式单位rpx及搭配使用UI产品工具

我们在编写CSS的时候,如果单位使用px,就会导致大小固定,但是如果我们想要根据不同的设备改变大小就要使用rpx作为单位。

rpx是以宽度为750的设计图得出的数据,以即时设计的设计稿为例:

该设计稿的宽度是375px

选中这个页面,点击头顶上的等比例缩放:

将右侧宽度改为750,下面选中为从中间缩放 

设计稿就成功变为宽度为750px  我们只需要根据在宽度为750px的设计稿下的尺寸设计rpx就行。如:

我选中的字体大小为48px。

那么我在编写的时候字体大小就是48rpx。 

 

这是在宽度为390的设备上呈现的效果

 

这是在宽度为768的设备上呈现的效果。 

成功实现了按比例进行缩放。 


http://www.kler.cn/a/503283.html

相关文章:

  • 力扣56. 合并区间
  • API接口技术开发小红书笔记详情api采集笔记图片视频参数解析
  • 【STM32】HAL库USB实现软件升级DFU的功能操作及配置
  • 开发人员学习书籍推荐(C#、Python方向)
  • IDEA编译器集成Maven环境以及项目的创建(2)
  • centos修改/etc/resolv.conf 重启network后又恢复到原来的状态
  • 微服务之松耦合
  • 微信小程序:实现首页权限菜单效果
  • Java-数据结构-栈与队列(常考面试题与单调栈)
  • 自动化办公|xlwings简介
  • 在移动端开发图表,uniapp+echarts,需要特殊处理,使用renderjs
  • 思科 Java 开发人员面试记录 2024(Java、Spring-Boot、Hibernate)
  • Kali之环境变量技巧(Kali‘s Environmental Variable Skills)
  • docker 与K8s的恩怨情仇
  • 【Vue】mouted、created、computed区别
  • HTTP详解——HTTP基础
  • Python爬虫:结合requests和Cheerio处理网页内容
  • MyBatis实现数据库的CRUD
  • python学opencv|读取图像(三十四)阈值处理-彩色图像
  • 机器学习头歌(第三部分-强化学习)