响应式布局

------------恢复内容开始------------

响应式布局就是手机端，电脑端，不管尺寸的大小，页面都能正常显示

------------恢复内容结束------------

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!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>