vw/vh rem px 三者的转换(快速入门移动端页面编写)
- 1:三种单位的转换
- 2:如何适配移动端的不同设备
- 前提知识:
- 手机端的长宽是实际设计过程中的两倍
- 比如手机端是 750 * 1200
- 那么具体实现的时候应该是 375px * 600px
- 好,记住这个结论,当有一张设计图摆在你面前的时候,你只需要将它长宽除以二,就没问题了。
- 这样说不知道有没有讲明白,没有的话请留言。
三种单位的转换
- 三者如何转化呢?
- 例如有一张设计图 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)
- 3:设置插件的属性 这是最关键的一步
- 4:正常编写代码,将这个当做一个PC端的网页写
- 5:边写边转化为对应的rem值