编写自适应网页——media

来源：互联网发布：安卓7.0 ios10 知乎编辑：程序博客网时间：2024/05/29 13:43

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/screen1.css"><style>div{border: 1px solid blue;}</style></head><body><h1>根据屏幕尺寸不同，显示不同布局样式</h1><div class="container"><div class="left">左侧附加导航<ul><li>新闻列表</li><li>图片列表</li><li>明星列表</li></ul></div><div class="middle"><div class="container-fluid"><img src="img/mao.jpg" class="my-img" alt=""><img src="img/mao.jpg" class="my-img" alt=""><img src="img/mao.jpg" class="my-img" alt=""><img src="img/mao.jpg" class="my-img" alt=""></div>中部主题内容<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem enim, alias dolorem, ratione earum, a animi eveniet quam, reiciendis saepe harum ipsam qui. Libero molestias, est ipsum aspernatur nam? Suscipit.</div></div><div class="right">右侧可有可无广告<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div></div></div></body></html>

screen1.css

/* 公共代码 */*{box-sizing: border-box;/* 宽度和高度属性包含内容，内边距和边框，但不包含外边距。 */}body{margin: 0;background: #FFF;font-size: 1em;}/* 定宽容器 */.container{margin: 0 auto;}.container:before{content: ' ';display: table;/* table类型能生成独立的bfc，防止上边距塌陷 */} /* 定宽子容器 */.container-fluid{width: 100%;}.left,.middle,.right{float: left;}.my-img{float: left;padding: 10px 5px;}/* 针对PC屏幕媒体查询 */@media screen and (min-width: 992px){.container{width: 970px;color: red;}.left,.right{width: 20%;}.middle{width: 60%;}.my-img{width: 25%;}}/* 针对PAD屏幕媒体查询 */@media screen and (min-width:768px) and (max-width: 991px){.container{width: 750px;color: green;}.left{width: 25%;}.middle{width: 75%;}.right{display: none;}.my-img{width: 25%;}}/* 针对PHONE屏幕媒体查询 */@media screen and (max-width: 767px){.container{width: 100%;color: blue;}.left,.middle{width: 100%;}.right{display: none;}.my-img{width: 50%;}}

阅读全文

'); })();