移动端自适应布局
2020-03-12 本文已影响0人
写写而已
html {
font-size: 26.67px
}
@media screen and (max-width: 1000px) {
html {
font-size:2.6667vw
}
}
p {
font-size: 1.2rem;
}
当屏幕宽度超过1000px时，计算后显示26.67px
当font-size采用rem时，在6p（375px）下，计算后显示为x10px，比如这里的p标签1.2rem，计算后是12px
| rem单位 | 对应px单位计算后大小 |
|---|---|
| 1rem | 10px |
| 1.5rem | 15px |
| 4rem | 40px |
max-width是1000，font-size就要是26.67，这个大小是适应1000的结果，如果想要其他max-width，那么html的font-size就要同步修改
| max-width | html的font-size |
|---|---|
| 1000px | 26.67px |
| 640px | 26.67*640/1000 = 17.14px |
这样到了最大值时就能平滑过渡，不会出现页面抖动，采用这个比例时，我们在写rem也好写
