1.视口
- 下面这段代码控制页面不同大小的设备可以响应布局
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2. 媒体查询
- 常用的屏幕尺寸
从小到大 如下所示
老智能机: 320px-480px
智能手机: ≥ 480px
平板电脑: ≥ 768px
中等屏幕(桌面显示器): ≥ 992px
大屏幕(大桌面显示器): ≥1200px
注意: 实现过程中,遵循移动优先原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--视口代码(必需)-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
nav {
height: 40px;
}
nav ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
nav ul li {
height: 40px;
text-align: center;
line-height: 40px;
flex: 1 1 100%;
}
nav ul li a {
text-decoration: none;
font-size: 14px;
color: #fff;
font-weight: bold;
}
nav ul li:nth-child(1) {
background-color: #1685a9;
}
nav ul li:nth-child(2) {
background-color: #fff143;
}
nav ul li:nth-child(3) {
background-color: #ff2d51;
}
nav ul li:nth-child(4) {
background-color: #0eb83a;
}
nav ul li:nth-child(5) {
background-color: #003371;
}
nav ul li:nth-child(6) {
background-color: #ff0097;
}
/*当屏幕小于768px时执行下面代码*/
@media (max-width: 768px) {
nav ul {
flex-direction: row;
flex-wrap: wrap;
}
nav ul li {
flex: 1 1 50%;
}
}
/*当屏幕小于480px时执行下面代码*/
@media (max-width: 480px) {
nav ul {
flex-direction: column;
flex-wrap: nowrap;
}
nav ul li {
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">index</a></li>
<li><a href="">index</a></li>
<li><a href="">index</a></li>
<li><a href="">index</a></li>
<li><a href="">index</a></li>
<li><a href="">index</a></li>
</ul>
</nav>
</body>
</html>
来源:http://www./content-4-154451.html
|