Css基础教程(二十一)

1.响应式布局

所谓响应式布局：是指同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。

响应式布局的4种方法： - 使用@media媒体查询 - 使用百分比 - 使用rem响应式布局 - vw 响应式布局 - 使用弹性盒子

实例：

使用媒体查询实现响应式布局效果。

当屏幕尺寸小于900px ,隐藏左侧的图片，当屏幕尺寸小于800px时，西安城墙介绍部分占据宽度60%且水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main{
            margin: 0px auto;
            width: 800px;
            height: 600px;
            display: flex;
            justify-content: space-around;
        }

        #wall{
            text-align: center;
            width: 380px;
            height: 600px;
            align-self: center;
        }

        /*当屏幕最大尺寸小于900px隐藏图片*/
        @media screen and (max-width: 900px) {
            #wall{
                display: none;
            }
        }

        /*当屏幕最大尺寸小于800px*/
        @media screen and (max-width: 800px) {
            #main{
                margin: 0px auto;
                width: 100%;
                height: 600px;
                display: flex;
                justify-content: space-around;
            }

            #intro{
                background-color: #f1f4f8;
                width: 60%;
                height: 600px;
                padding: 20px;
                border-radius: 20px;
            }
        }


        .wall_img_box{
            height: 600px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        #wall  img{
            width: 260px;
            border-radius: 180px;
        }

        #intro{
            background-color: #f1f4f8;
            width: 380px;
            height: 600px;
            padding: 20px;
            border-radius: 20px;
        }

        #intro p{
            text-indent: 2em;
            color: #666;

        }
    </style>
</head>
<body>
<div id="main">
    <div id="wall">
        <div class="wall_img_box">
            <img src="https://img.simoniu.com/xian_wall.jpg"/>
        </div>
    </div>
    <div id="intro">
        <h3 style="margin-left: 10px;color:#444">西安城墙</h3>
        <hr style="border: 0.5px solid #ccc; ">
        <p>
            西安城墙，是中国现存规模最大、保存最完整的古代城垣 ，是第一批全国重点文物保护单位、国家AAAAA级旅游景区 。广义的西安城墙包括西安唐城墙和西安明城墙，但一般特指狭义上的西安明城墙。
        </p>
        <p>
            西安明城墙位于陕西省西安市中心区，墙高12米，顶宽12—14米，底宽15—18米，轮廓呈封闭的长方形，周长13.74千米。城墙内人们习惯称为古城区，面积11.32平方千米，著名的西安钟鼓楼就位于古城区中心。
        </p>
        <p>
            西安城墙主城门有四座：长乐门（东门），永宁门（南门），安定门（西门），安远门（北门），这四座城门也是古城墙的原有城门。从民国开始为方便出入古城区，先后新辟了多座城门，至今西安城墙已有城门18座。
        </p>
        <p>
            1961年3月4日，西安城墙被国务院公布为第一批全国重点文物保护单位 。2018中国西北旅游营销大会暨旅游装备展上，西安城墙入围"神奇西北100景"榜单。
        </p>
    </div>
</div>
</body>
</html>

运行效果：