在使用高德地图或者百度地图的JavaScript API的时候都要事先在HTML文件中创建一个div的标签,然后所有的地图绘制工作都会在这个标签中进行,我们可以把这个标签暂称为地图容器。怎样绘制一个正方形的地图容器呢?
假设代码如下:
在PC端做这个事情简单的很,只要使用类似下面的语句就好
#mapContainer {
width: 320px;
height: 320px;
}
可是移动端页面宽度有限,我们希望地图大小是正方形,并且边长为屏幕的95%,那怎么办?怎么绘制一个正方形的地图?其实这就是一个CSS的问题。
方法一: 使用vw单位
这应该是最容易理解的方法,CSS3 增加了基于可视区域百分比的长度单位 vw, vh, vmin, vmax。 vw 是相对于视口宽度百分比的单位。详细可以参考:
http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/
所以写法就是:
#mapContainer {
width: 95%;
height: 95vw;
}
使用这种方法的好处是简单容易理解,不过会有兼容性问题,可以参考:这里
方法二: padding-bottom的秒用
这种方法先上代码
#mapContainer {
width: 95%;
padding-bottom: 95%;
}
这种方案也很简洁,且兼容性好,不过如果#mapContainer里有内容,可能会被撑开,所以最好加上一句 height:0,也就是
#mapContainer {
width: 95%;
padding-bottom: 95%;
height: 0;
}
方法三: 伪类及margin的秒用
也先上代码:
#mapContainer {
width: 95%;
overflow: hidden;
}
#mapContainer:after {
content: '';
display: block;
margin-top: 100%;
}
这种方案利用了 margin 百分比相对父元素宽度计算的特性实现。
效果图
有其他方法也欢迎补充。