首页 > 其他分享 >css中的响应式单位rpx,vue3中@import的导入

css中的响应式单位rpx,vue3中@import的导入

时间:2024-09-06 21:52:34浏览次数:15  
标签:rpx px 100px 像素 width 宽度 vue3 import

尺寸单位,px和rpx对比

px单位

像素是图像的基本采样单位,它不是一个确定的物理量,不同的设备,其图像基本单位是不同的,比如显示器的点距,可以认为是显示器的物理像素

rpx单位

可以根据屏幕宽度进行自适应。rpx其实是微信对于rem的一种应用的规定,或者说一种设计的方案,官方上规定屏幕宽度为20rem,规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素

App全共享

权限低,都会使用但是会覆盖

content-box 是默认值。如果你设置一个元素的宽为 100px,那么这个元素的内容区会有 100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的。也就是说,如果你将一个元素的 width 设为 100px,那么这 100px 会包含它的 border 和 padding,内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下,这使得我们更容易地设定一个元素的宽高

外部样式

使用@import导入

标签:rpx,px,100px,像素,width,宽度,vue3,import
From: https://blog.csdn.net/m0_65941214/article/details/141963501

相关文章

  • Vue3项目开发——新闻发布管理系统(五)
    文章目录七、登录&注册页面设计开发4、后端接口调用4.1AXIOS请求工具封装4.2创建axios实例①安装axios②封装axios模块4.3完成axios基本配置5实现注册功能5.1创建接口调用js文件5.2页面中调用注册方法6实现登录功能6.1创建......
  • VUE框架Vue3使用自定义事件的方式传递数据------VUE框架
    <template><!--给User绑定事件--><!--带参数的方法不要有括号,否则识别不到,我不懂原理...--><User@event1="showInfo"></User></template><script>importUserfrom"./components/User.vue"exportdefault{......
  • vue2和vue3响应式原理的区别
    vue2和vue3响应式原理的区别目录一、速度差距二、各自底层原理1.Vue2的响应式原理2.Vue3的响应式原理3.响应式性能对比三、扩展与高级技巧1.Vue2中的s......
  • 这应该是全网最详细的Vue3.5版本解读
    版本号这次的版本号是天元突破红莲螺岩,这是07年出的一个二次元动漫,作者是没看过的。在此之前我一直以为这次的版本号会叫黑神话:悟空,可能悟空不够二次元吧。响应式响应式相关的内容主要分为:重构响应式、响应式props支持解构、新增onEffectCleanup函数、新增basewatch函数......
  • 70%的人都答错了的面试题,vue3的ref是如何实现响应式的?
    本文将通过debug的方式带你搞清楚当ref接收的是对象和原始类型时,分别是如何实现响应式的。注:本文中使用的vue版本为3.4.19。看个demo还是老套路,我们来搞个demo,index.vue文件代码如下:<template><div><p>count的值为:{{count}}</p><p>user.count的值为:{{use......
  • elementplus vue3 table表格动态合并单元格
    letcellList:any[]=[]//单元格数组letcount:number=0//计数constcomputeCell=(tableList:any[],name)=>{cellList=[]count=0for(leti=0;i<tableList.length;i++){if(i===0){//先设置第一项cellList.push(1)......
  • vue3 实现无感刷新token
    问题一:如何防止多次刷新token通过设置一个变量isRefreshing去控制是否在刷新token的状态if(!isRefreshing){isRefreshing=truereturnrefreshToken().then((data:any)=>{setToken(data.token_type+''+data.access_token);//存储token过期时换取新token值localStora......
  • vue3中computed和watch的使用
    一computd计算属性computed是Vue3中用于创建计算属性的功能。它允许你定义基于响应式数据的动态值,这些值会在其依赖的数据发生变化时自动更新。使用场景依赖于其他响应式数据的计算结果:你可以创建一个计算属性,其值依赖于其他响应式数据,并在这些数据变化时自动更新。......
  • 关于Vue2和Vue3的区别及组合式/选项式API区别——高频面试题
    1、vue2和vue3的区别以下包含但不仅仅只有这10条区别但是,在应对面试时,回答已经足够用了,这些也是vue2和vue3的主要区别CompositionAPIvsOptionsAPICompositionAPI:组合式APIOptionsAPI:选项式API——在vue2中使用它们两者在vue3中是组织代码的不同方式Vue3引入了Com......
  • vue3 tsx 测试几种使用方式
    总论tsxsetup里面定义了returndom元素,则optionsapi的render函数不生效options的render函数生效前提是setup里面不能returndomoptions的render里面可以直接使用this访问setup里面的数据或者ctxtsx一般最好用defineComponent包裹,这样响应式才能生效tsxdom语法使用{}......