網頁響應式佈局的應用

weixin_42590083發表於2020-12-04
網頁

響應式佈局的應用

	主要用到了media，css中的媒體查詢的功能，實現了網頁中的內容可以根據不同裝置，不同的解析度來實現不同的佈局；從而在pc和移動端都可以完整的展現；
		效果如圖：
		1200+的解析度：

在這裡插入圖片描述
1000-1200的解析度：
在這裡插入圖片描述
600-1000的解析度：
在這裡插入圖片描述
600-解析度：
在這裡插入圖片描述
程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>響應式佈局的應用</title>
    <style>
        *{margin: 0; padding: 0;}
        ::-webkit-scrollbar{
            width: 0;
            height: 0;
        }
        h2{
            font-size: 16px;
            font-weight: 600;

        }
        #content{
            padding: 0 20px;
            display: flex;
            flex-wrap: wrap;
        }
        .box_wrap{
            width: 25%;
            padding: 15px;
            box-sizing: border-box;
        }
        .box{
            padding: 5px;
          box-shadow: 0 0 5px rgba(0, 0, 0, .8);
        }
        img{
            width: 100%;
        }
        section{
            overflow: hidden;
        }
        time{
            float: left;
        }
        span{
            float: right;
        }
        @media all and (min-width: 1000px) and (max-width: 1200px) {
           .box_wrap{ width: 33.3333%;}
        }
        @media all and (min-width: 600px) and (max-width: 1000px) {
           .box_wrap{ width: 50%;}
        }
        @media all and (max-width: 600px) {
           .box_wrap{ width: 95%;}
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="box_wrap">

            <div class="box">
            
                <img src="day14/images/1.jpg" alt="">
                <h2>迷你微型攝影展</h2>
                <section>
                    <time>2016-12-12</time>
                    <span>作者：tom</span>
                </section>
            </div>

        </div>

        <div class="box_wrap">

            <div class="box">
            
                <img src="day14/images/1.jpg" alt="">
                <h2>迷你微型攝影展</h2>
                <section>
                    <time>2016-12-12</time>
                    <span>作者：tom</span>
                </section>
            </div>

        </div>

        <div class="box_wrap">

            <div class="box">
            
                <img src="day14/images/1.jpg" alt="">
                <h2>迷你微型攝影展</h2>
                <section>
                    <time>2016-12-12</time>
                    <span>作者：tom</span>
                </section>
            </div>

        </div>

        <div class="box_wrap">

            <div class="box">
            
                <img src="day14/images/1.jpg" alt="">
                <h2>迷你微型攝影展</h2>
                <section>
                    <time>2016-12-12</time>
                    <span>作者：tom</span>
                </section>
            </div>

        </div>

        <div class="box_wrap">

            <div class="box">
            
                <img src="day14/images/1.jpg" alt="">
                <h2>迷你微型攝影展</h2>
                <section>
                    <time>2016-12-12</time>
                    <span>作者：tom</span>
                </section>
            </div>

        </div>

        <div class="box_wrap">

            <div class="box">
            
                <img src="day14/images/1.jpg" alt="">
                <h2>迷你微型攝影展</h2>
                <section>
                    <time>2016-12-12</time>
                    <span>作者：tom</span>
                </section>
            </div>

        </div>

        <div class="box_wrap">

            <div class="box">
            
                <img src="day14/images/1.jpg" alt="">
                <h2>迷你微型攝影展</h2>
                <section>
                    <time>2016-12-12</time>
                    <span>作者：tom</span>
                </section>
            </div>

        </div>

        <div class="box_wrap">

            <div class="box">
            
                <img src="day14/images/1.jpg" alt="">
                <h2>迷你微型攝影展</h2>
                <section>
                    <time>2016-12-12</time>
                    <span>作者：tom</span>
                </section>
            </div>

        </div>

        <div class="box_wrap">

            <div class="box">
            
                <img src="day14/images/1.jpg" alt="">
                <h2>迷你微型攝影展</h2>
                <section>
                    <time>2016-12-12</time>
                    <span>作者：tom</span>
                </section>
            </div>

        </div>

        <div class="box_wrap">

            <div class="box">
            
                <img src="day14/images/1.jpg" alt="">
                <h2>迷你微型攝影展</h2>
                <section>
                    <time>2016-12-12</time>
                    <span>作者：tom</span>
                </section>
            </div>

        </div>

        <div class="box_wrap">

            <div class="box">
            
                <img src="day14/images/1.jpg" alt="">
                <h2>迷你微型攝影展</h2>
                <section>
                    <time>2016-12-12</time>
                    <span>作者：tom</span>
                </section>
            </div>

        </div>

        <div class="box_wrap">

            <div class="box">
            
                <img src="day14/images/1.jpg" alt="">
                <h2>迷你微型攝影展</h2>
                <section>
                    <time>2016-12-12</time>
                    <span>作者：tom</span>
                </section>
            </div>

        </div>
      
    </div>
</body>
</html>

相關文章