这里提供三种网页自适应的方法:
方案一:用比例控制大小
<head>标签里写入
<meta name="viewport" content="width=device-width, initial-scale=1.0">
以下是相关的属性的解释:
- width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)
- height:和 width 相对应,指定高度
- initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例,1.0就是占网页的100%
- maximum-scale:允许用户缩放到的最大比例
- minimum-scale:允许用户缩放到的最小比例
- user-scalable:用户是否可以手动缩放
然后网页内的所有元素的大小,位置都用%去写,不能用px等,显然比较蛋疼的一种方法。
方案二:使用媒体查询
这里会用到css3的@media,可以根据查询媒体的分辨率,针对不同的分辨率写不同的css,在执行时会自动识别来执行不同css样式,也比较繁琐。
举个例子,当浏览器窗口小于 500px 时,背景变为蓝色:
@media only screen and (max- 500px) { body { background-color: blue; } }
方案三:定义div大小来限定
在写的所有元素外面套一个div块,规定min-width和min-height,这样在浏览器缩小尺寸的时候布局就不会乱掉。当然也要注意,这时候设计所有元素时参照的的最大的父元素就不能看body了,得看你用的div这个块的大小。(简单易实现,但并没有实现真正的自适应!)
例如:
div{
min- 1920px; min-height: 1080px;
}
最后:
提供一种可以实现背景居中和网页的元素位置居中的参考,即使改变浏览器尺寸,背景及其中元素依然可以不变位置。用到了绝对定位
//在定义最大的块div或body时
.div{ position: absolute; 想要的网页背景宽度; height: 想要的网页背景长度; top:0; left:50%; margin-left:-(想要的网页背景宽度的一半) ; //关键 }