HTML-移动端-rem px vw vh 的转换

2024-09-24 18:13:06

vw/vh rem px 三者的转换（快速入门移动端页面编写）

1：三种单位的转换
2：如何适配移动端的不同设备
前提知识：
- 手机端的长宽是实际设计过程中的两倍
- 比如手机端是 750 * 1200
- 那么具体实现的时候应该是 375px * 600px
- 好，记住这个结论，当有一张设计图摆在你面前的时候，你只需要将它长宽除以二，就没问题了。
- 这样说不知道有没有讲明白，没有的话请留言。

三种单位的转换

vw / vh
- 分别是 viewwidth 和 viewheight 的缩写
- 100vw 等于整个屏幕宽度 100vh等于整个屏幕高度
- 例如某设备宽高是 375px * 600px
- 那么 1vw = 3.75px 1vh = 6px
- 要想适配移动端的设备，只需要讲 html font-size设置为合适的 vw值就可以了（这是其中一种方法）
- 如果想要让一个盒子覆盖整个页面需要设置为
```
    width: 100vw;

    height: 100vh;
```
rem
- 1rem 等于HTML的字体大小（默认为16px）
- 使用rem可以使得编写的移动端网页尽可能地适配设备，而不会出现在iphone没有乱，到华为就一团糟的场景
px：浏览器的像素，一种相对单位

三者如何转化呢？
例如有一张设计图 375px * 600px
我们可以这样设置HTML的字体大小

html {font-size: 37.5vw;}

这样的话 1rem=37.5vw=100px
代码区内的font-size 37.5也可以取其他的值（1-100），我这样取是因为1rem等于10px的话使用起来更有优势

如何适配移动端的不同设备

例如转换后的长宽分别为 375px 600px
1：定义HTML的字体大小（选择一个对rem和px的转换比较有好的值）
2：下载对应编辑器上的插件，px转rem（vscode是cssrem）
- 插件安装以及设置的链接：https://www.jianshu.com/p/bb48fbdacb26
3：设置插件的属性这是最关键的一步
- 即px转rem的比例
4：正常编写代码，将这个当做一个PC端的网页写
5：边写边转化为对应的rem值

最新文章

热门文章