H5C3响应式布局
响应式布局-media基本使用(媒体查询)
响应式布局:一套代码实现多种设备访问一致性。(pc 平板 手机)
优点：一直保持一个url,一套代码
缺点: 浏览器支持程度(ie8和以下就不兼容)
使用
@media only screen and (max-width:700px){
}
only: 可以排除不支持媒体查询的浏览器
screen: 设备类型
max-width: 设备特性 设备小于700像素
@media only screen and (max-width:300px) and (min-width:500px){
}
Document#box {
height: 100px;
background: red;
}
/* 小于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;
}
}
/* @media only screen and (max-width:1000px){
#box{
background:orange;
}
} */
响应式布局-网站头部布局
Document/* 小于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;
}
}
- 首页
- 产品
- 案例
- 开发者中心
- 社区
响应式图片-不同设备加载不同图片
响应式布局图片
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
