一, 前言
根据前面写的 你不知道的 CSS 单位, 进行了一种响应式布局的思考.
视口布局的优点: 宽度和高度全部自动适应! 再加上 rem 布局的字体适应, 可以完美解决各种屏幕适配问题!
单位可参考 : 你不知道的 CSS 单位
该布局兼容性如下:
IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome9.0+2.0+4.0+3.1+3.5+3.2+2.1+18.0
二, 正文
1,vw,vh 是基于视口的布局方案, 故这个 meta 元素的视口必须声明.(解决宽高自动适配)
2,rem 布局 - 解决字体适配 (此布局在 weex 中无法识别)
rem 布局原理: 根据 CSS 的媒体查询功能, 更改 html 根字体大小, 实现字体大小随屏幕尺寸变化.
@media only screen and (max-width: 1600px) and (min-width: 1280px){ html{ font-size: 14px; } } @media only screen and (max-width: 1280px) and (min-width: 960px){ html{ font-size: 12px; } } @media only screen and (max-width: 960px){ html{ font-size: 10px; } }
3,vw,vh,rem 的使用
上面代码中的 50vw 代表了此 p 占据视口宽度的 50%, 高度占据视口高度的 20%, 并且会随着视口的变化, 进行自适应;
字体则是 1.5 倍的 html 根字体大小. 并且根据媒体查询进行字号变化.
三, 感受
使用 vw+vh+rem 的布局之外, 可以再加上 elementUI 的栅格布局, 可以轻松, 快速的搭配出真正的响应式布局, 但要注意浏览器的兼容性问题!
来源: http://www.92to.com/bangong/2018/08-18/34036778.html