最近公司做的项目需要做到一屏展示,不能出现滚动条,至少在打开页面时不能出现滚动条,就这要求页面自适吟,而且不光是要页面布局需要做到自适吟调节,图片和字体也需要做到自适吟,现在我的实现方案是去掉所有的px ,用vw,wh,vmin(vm)代替。
首先在布局方面用百分比布局,尽量不要用具体的大小,如:px,cm
vw,wh,vmin(vm)三个是视口的单位 具体换算单位为:
1vw = 1/100 视口宽度
1vh = 1/100 视口高度
1vmin(vm) = 1/100 视口高度宽度中较小的一个
例如:
h1 {
font-size: 8vm; //适用于IE
font-size: 8vmin; //其他浏览器
}
如果视口的宽度是300mm,高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100,因为高度比宽度要小,所以计算的时候相对于高度。