响应式布局

2022-03-25 20:34:11 作者：互联网

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

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

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

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

标签：body,h1,width,500px,所用,布局,响应,background
来源： https://www.cnblogs.com/jwzj/p/16056539.html