响应式布局
------------恢复内容开始------------
响应式布局就是手机端，电脑端，不管尺寸的大小，页面都能正常显示
------------恢复内容结束------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background: gray;
color: white;
text-align: center;
padding-top: 100px;
}
h1 {
display: none;
}
/* samrtphone */
/* 媒体查询 */
@media(max-width:500px) {
/* 当所用设备的宽超过500px样式不改变 当所用设备的宽不超过500px时 默认为手机端 */
body {
background: red;
}
#samrtphone h1 {
display: block;
}
}
/* table */
/* 媒体查询 */
@media (min-width: 501px) and (max-width:768px) {
/* 当所用设备的宽超过500px样式不改变 当所用设备的宽不超过500px时 默认为手机端 */
body {
background: blue;
}
#table h1 {
display: block;
}
}
/* normal */
/* 媒体查询 */
@media (min-width: 769px) and (max-width:1200px) {
/* 当所用设备的宽超过500px样式不改变 当所用设备的宽不超过500px时 默认为手机端 */
body {
background: greenyellow;
}
#normal h1 {
display: block;
}
}
/* widescreen */
/* 媒体查询 */
@media screen and (min-width: 1201px) {
/* 当所用设备的宽超过500px样式不改变 当所用设备的宽不超过500px时 默认为手机端 */
body {
background: black;
}
#widescreen h1 {
display: block;
}
}
/* landscape */
/* 媒体查询 */
@media screen and (max-height: 500px) {
/* 当所用设备的宽超过500px样式不改变 当所用设备的宽不超过500px时 默认为手机端 */
body {
background: orange;
}
#landscape h1 {
display: block;
}
}
</style>
<link rel="stylesheet" media="screen and (max-width:768px;)" href="css/new_file.css">
</head>
<body>
<div id="widescreen">
<h1>Widescreen</h1>
</div>
<div id="normal">
<h1>normal</h1>
</div>
<div id="table">
<h1>Table</h1>
</div>
<div id="samrtphone">
<h1>Samrtphone</h1>
</div>
<div id="landscape">
<h1>Landscape</h1>
</div>
</body>
</html>
