H5C3响应式布局
响应式布局-media基本使用(媒体查询)
响应式布局:一套代码实现多种设备访问一致性。(pc 平板 手机)
使用
@media only screen and (max-width:700px){
}
only: 可以排除不支持媒体查询的浏览器
screen: 设备类型
max-width: 设备特性 设备小于700像素
@media only screen and (max-width:300px) and (min-width:500px){
}
```html
响应式布局-网站头部布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 小于300 */
@media only screen and (max-width:300px) {
#box {
background: blue;
}
}
/* 300-500 */
@media only screen and (min-width:300px) and (max-width:500px) {
#box {
background:orange;
}
}
*{
margin:0;
padding:0;
}
nav{
background: #000;
color:#fff;
text-align: center;
}
ul li{
list-style:none;
display: inline-block;
line-height: 100px;
margin: 0 15px;
}
@media only screen and (max-width:700px){
nav{
text-align:left;
padding:0 20px;
}
ul li+li{
display: none;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li>首页</li>
<li>产品</li>
<li>案例</li>
<li>开发者中心</li>
<li>社区</li>
</ul>
</nav>
</body>
</html>
响应式图片-不同设备加载不同图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>响应式布局图片</title>
</head>
<body>
<!-- 响应式图片 -->
<picture>
<!-- 在大于1000 就是3.jpg -->
<source srcset='./img/3.jpg' media='(min-width:1000px)'>
<!-- 大于800 就是1.jpg -->
<source srcset='./img/1.jpg' media='(min-width:800px)'>
<img srcset="./img/2.jpg" alt="">
</picture>
</body>
</html>
