编写自适应网页——media

女爷i 2022-06-03 09:53 218阅读 0赞

<!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%;
    	}
    }