共计 415 个字符,预计需要花费 2 分钟才能阅读完成。
自适应布局
常见字体单位
- px
- em
- rem
1. px
像素单位,跟 dpi 有关
缺点:依赖于 viewport,@media 和 dpr 去进行自适应
2. em
1em = 16px,相对父元素自适应
3. rem
1em = 16px,相对根元素自适应
em 和 rem 布局一般在 body 设置 font-size:62.5%
; 这样比较好换算,即
1.4em = 14px
1.4rem = 14px
布局
-
常见布局
https://www.cnblogs.com/zhuzh…
-
流行布局
一般来说拿到的是 640px 和 750px 的设计稿
1.rem 布局
写 js 根据 dpr 和传入的设计稿宽度动态改变
2.vw 布局
根元素这样写
html {font-size: 13.3333333333333vw // 100px}
原因是
拿到设计稿一般是 750px,就是 750px = 100vw,那么 1px 是 0.13333333333vw,那么 100px 就是 13.3333333333333vw 了,
当然也可以用 js 计算,这个比较方便
正文完