移动端适配单位vw和px的转换

2024-07-03 06:12:51

px是固定的大小单位
而vw是根据设备的大小来划分的单位
1vw=1%窗口宽度（也就是窗口宽度是100vw）

以固定宽度750px为例进行计算：

一、vw、px、rem换算（1rem = 100px）：（谷歌，火狐，IE、uc、qq浏览器适用）
已知：750px = 100vw
计算：1px = (100vw / 750px) = 0.1333vw

定义：1rem = 100px （也就是1px = 0.01rem）
那么：1rem = 0.1333vw * 100 = 13.33vw （设置：根标签html字体为100px：font-size = 13.33vw）

换算：1rem = 100px = 13.33vw
1px = 0.01rem = 0.1333vw

示例：16px = 0.01rem * 16 = 0.16rem

二、也可以这样换算（1rem = 1px）：（谷歌，火狐，IE适用，uc、qq浏览器不适用）
已知：750px = 100vw
计算：1px = (100vw / 750px) = 0.1333vw

定义：1rem = 1px （也就是1px = 1rem）
那么：1rem = 0.1333vw （设置：html的根元素设置为1px：font-size = 0.1333vw）

换算：1rem = 1px = 0.1333vw
1px = 1rem = 0.1333vw

示例：16px = 16rem

移动端适配单位vw和px的转换相关推荐

移动端适配( 使用 vw 完成移动端适配 )
移动端适配( 使用 vw 完成移动端适配 ) 文档 postcss-px-to-viewport 是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单位. 具体用法 1.安装 npm ...
移动端页面单位的选择(px em rem)
移动端页面单位的选择(px em rem) 绝对单位: px 相对单位: rem em em具有继承性继承自直接父类所以说在移动端很少用浏览器默认的字体大小 16px 那么 1em= ...
移动端字体单位该使用px还是rem?
对于只需要适配少部分手机设备,分辨率对页面影响不大的,使用px即可, 对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备. rem配置参考,适合视觉稿 ...
ui设计移动端字体适配_UI设计稿中常见的单位及移动端适配
一.pt 在我们的设计稿中,经常看到以pt单位来标注的稿子,那么pt究竟是个什么单位?其实pt是用于印刷行业用来表示字体大小的单位,也叫做磅,用过word设置字体的应该不会陌生,它是一个绝对长度,为1 ...
移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位当前市面上用的比较多相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
vscode怎么自动将px转换成vw_基于react/vue移动端适配之px自动转rem、vw
作为一名前端开发,在做移动端适配时rem.vw是我们经常用到的单位,但是我们在实际开发过程中需要将设计稿上的px转换成rem,如果手动去计算,将是一个很耗时.费力的过程.这是就需要一个工具可以帮我们自 ...
web SPA 移动端手机H5项目适配（vw+postcss）
在以前的时候,适配移动端我们一般使用rem,通过动态改变根fontsize来使页面缩放.其中很著名的就是淘宝开源的Flexible.当初为了能让页面更好的适配各种不同的终端,通过Hack手段来根据设备 ...
H5移动端适配方案rem/vw
前言在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
【H5移动端】关于前端H5移动端的单位适配（不定期补充）
文章目录前置概念视口概念关于像素设置理想视口方案一:@media修改动态rem 方案二:第三方手淘flexible postcss-pxtorem 方案三:JS控制rem 方案四:使用vh/ ...

最新文章

热门文章