rem、rm、px、vw之间的相互转换

一、vw px rem em到底是什么

1vw/vh:就是相对视口宽度或者高度,100vw 等于整个屏幕宽度 100vh等于整个屏幕高度。1vw = 1% 视口宽度。意思是一个视口就是100vw。长度和宽度等于窗口长度或宽度的1/100

例如：1920x800的设计稿

换算1/100 1920=192 所以 1vw=192px; 即：1vw/y=100vw/1920px

换算1/100 800=8 所以　1vh=8px;

2px:px是屏幕设备物理上能显示出的最小的一点。是相对长度单位。在桌面浏览器中，1个像素往往是对着电脑屏幕的1个物理像素，但是在移动端，css中的1px并不等于设备的1px。比如iphone3，分辨率是320 x 480。iphone4变成了640 x 960，但是iphone4的实际屏幕尺寸并没有变化。这时候的1个css像素就是等于两个物理像素。

3rem:相对于html根元素的字体大小（font-size）来计算的长度单位，可以设置，默认16px

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

二、vw px rem之间的换算

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

100vw = 1920px => 1vw = 192px

假设： 1rem = 100px

那么:

1920px=192rem = 100vw => 1rem = 100/192 =5208vw

100px = 1rem = 5208vw

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

font-size: 5208vw即可。

响应式布局：

一：使用百分比与rem

宽度% 高度rem 字号rem 在html中设置根元素的font-size大小

这样页面中的rem将根据根元素显示字号大小，2rem就是32px

二：使用百分比与px

单位设置px，移动端的px自动转为rem

在这个包里：javaawt，里面有一个抽象类：Toolkit可以取得屏幕大小，写一小段示例吧：

import javaawt;

Dimension screen=ToolkitgetDefaultToolkit()getScreenSize();

int width=screenwidth; //屏幕宽度，以像素为单位

int height=screenheight; //屏幕高度

不一样的

屏幕宽高是硬件属性

分辨率是软件设置

一般来说 应该屏幕物理像素要高于分辨率,否则设置就没意义了

另外, 屏幕可能是16:9, 但分辨率可以强行设置为4:3的, 显示效果会失真

手机里css1个像素等于2个物理像素，写成min-width、max-width，400px已经算是极致了，它指手机浏览器的分辨率，而不是手机设备的屏幕分辨率

可以试试320、360、384、400这几个临界点

以上就是关于rem、rm、px、vw之间的相互转换全部的内容，包括:rem、rm、px、vw之间的相互转换、Java 获取屏幕的正确的物理尺寸、获取屏幕宽高与分辨率宽高是一回事吗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！