实现响应式布局有很多方法:
媒体查询功能:Media Queries就是其中之一
media用来指定特定的媒体类型,例如屏幕(screen)和打印(print)和支持所有媒体介质的all
如果要在head部分引用,形式如下:
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
当然还可以在<style></style>中引用:
<style type="text/css">
@media screen{
选择器{
属性:属性值;
}
}
</style>
通过一个简单的例子就明白了怎么媒体查询了:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>media Queries</title>
<style>
div{
width: 600px;
height: 600px;
background-color: red;
}
@media (max-width: 800px) {
div{
width:500px;
height:500px;
background-color:yellow;
}
}
@media (max-width: 500px) {
div{
width:300px;
height:300px;
background-color:blue;
}
}
</style>
<body>
<div></div>
</body>
</html>
例子很简单,max-width为品目显示最大宽度,因此:
当屏幕宽度大于800时,显示一个600*600的大红块
小于或等于800时,显示一个500*500的黄色div
同理,屏幕宽度小于等于500时,显示一个300*300的蓝色div
效果如图:
1.屏幕宽度为:1366px全屏状态
2.屏幕宽度为611px
3.屏幕宽度为440px
同理:也可以用min-width表示当屏幕宽度大于或等于xxxpx时的状态
或者采用screen and (min-width:600px) and (max-width:900px)结合多个媒体查询