css rem和px换算,移动端的vw px rem之间换算

一、vw px rem em是什么

1.vw:就是相对视口宽度(Viewport Width)。1vw = 1% * 视口宽度。也就是说，一个视口就是100vw。

2.px:px应该是在css中使用最为普遍的单位了吧。px是屏幕设备物理上能显示出的最小的一点。这个点不是固定宽度的，是相对长度单位。在桌面浏览器中，1个像素往往是对着电脑屏幕的1个物理像素，但是在移动端，随着Retina屏的流行，分辨率提高了。css中的1px并不等于设备的1px。比如苹果三手机，分辨率是320 x 480。苹果四手机，变成了640 x 960，但是苹果四手机的实际屏幕尺寸并没有变化。这时候的1个css像素就是等于两个物理像素。

3.rem:是相对单位，相对于html的字体尺寸。

4.em:所有现代浏览器下，默认字体尺寸都是16px。这时,1em = 16px。em会继承父级迟钝，也是相对单位。

二、vw px rem之间的换算

1.我们假设pad的设计稿是以1920px为标准的。那么：

100vw = 1920px

1vw = 19.2px

我们想要： 1rem = 100px(这样方便我们在写代码的时候换算)

那么:

100px = 100vw / 19.2 = 1rem

所以：

1rem = 5.208vw。

这时候，我们只要给html的根元素设置：

font-size: 5.208vw即可。

2.同理的，手机端我们假设设计稿是以750px为标准的，那么:

100vw = 750px

1vw = 7.5px

我们想要： 1rem = 100px

那么：

100px = 100vw / 7.5 = 1rem

那么：

1rem = 13.33vw

好啦，本篇文章到此为止~

css rem和px换算,移动端的vw px rem之间换算相关推荐

移动端的vw px rem之间换算
一.vw px rem em是什么 1.vw:就是相对视口宽度(Viewport Width).1vw = 1% * 视口宽度.也就是说,一个视口就是100vw. 2.px:px应该是在css中使用最 ...
vue的pc端适配vw vh rem
安装命令: npm i postcss-px-to-viewport@1.1.1npm i postcss-pxtorem@5.1.1 2.安装完之后在根目录新建postcss.config.js(和 ...
pc端rem适配_自适应PC端网页制作使用REM
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...
css移动端页面单位,移动端web开发PX单位问题
在页面开发过程中,对于设计给的设计稿,一般的PC页面开发的时候,很简单,使用px为单位,给多少px就标注多少.但是到了移动端的web开发,一般标注的单位是dp,这对于css里面px单位就需要转换一下了 ...
移动端页面自适应解决方案—rem布局(进阶版)
之前的一篇<手机端页面自适应解决方案-rem布局>随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem布局(进阶版) 该方案使用相当简单,把下面这 ...
移动端适配+flexible.js+rem适配
移动端适配前沿: 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问 ...
px，em, rem的区别，在项目中怎么使用rem.
一.px px像素,绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟的长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度单位,需要指定精度DPI. 二.em em是相对长 ...
如何把设计稿中px值转化为想要的rem值
如何把设计稿中px值转化为想要的rem值首先我们需要的是把尺寸转化为rem值假如设计稿中的是 200px*200px的图片移动端的设计图尺寸一般是640*750; 第一步. 把图片分为若干份 ...
postcss-px2vw插件将px转vw、rem
postcss-px2vw 一款 PostCSS 插件,将 px 转换成 vw 和 rem. 该插件主要结合了 postcss-pxtorem 和 postcss-px-to-viewport 的功能 ...

css rem和px换算,移动端的vw px rem之间换算

css rem和px换算,移动端的vw px rem之间换算相关推荐

最新文章

热门文章