响应式布局

1、响应式布局？

　　用一套代码，去适配不同的设备。既可以在PC端运行也可以在移动端运行。

　　注：比较适合小网站，个人博客，产品介绍页........

2、响应式布局的作用？

　　带来可以在任何设备上展示和操作的用户体验，设备包括桌面系统设备，平板电脑，iPhone等手机等。

　　网页页面能根据设备的大小自动调整内容。

3、响应式布局使用的方法？

　　css3 媒体查询

　　语法@media all and （条件）{在满足条件下修改的css样式} 比如 @media all and （min-width:500px）{ .box1{ display:none;}}

　　link使用：<link rel="stylesheet" href="./hello.css" media="all and (min-width:600px)">

4、实现响应式布局？

　　先去适配PC端 -> 过渡到pad -> 过渡到手机端 (推荐的)/* NZ*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* 正常的样式 , 针对PC端的 */
    *{ margin:0; padding:0;}
    ul{ list-style: none;}
    a{ text-decoration: none;}
    img{ display: block;}

    #header{ height:50px; width:100%; position: fixed; top:0; left:0; background:rgba(0,0,0,0.5); display: flex; justify-content: space-between; align-items: center;}
    #header .logo{ width:140px; margin-left: 55px;}
    #header .logo img{ width:100%;}
    #header .nav{ display: flex; width:450px; justify-content: space-between;}
    #header .nav a{ color:white;}
    #header .login{ margin-right: 16px;}
    #header .login a{ color:white;}
    #header .menu{ margin-left:20px; display: none;}
    #header .menu a{ color:white;}

    #banner{ height:auto; overflow: hidden;}
    #banner img{ width:100%;}

    #ad{ height:auto; overflow: hidden; margin-top:10px; display: flex;}
    #ad .ad-1{ width:50%; margin:0 10px;}
    #ad .ad-1 img{ width:100%;}
    #ad .ad-2{ width:50%; display: flex;}
    #ad .ad-2 a{ width:50%; display: block; margin:0 10px;}
    #ad .ad-2 img{ width:100%;}

    #list{ display: flex; justify-content: space-around; flex-wrap: wrap;}
    #list li{ width:24%; border:1px #ccc solid; margin-top:10px;}
    #list img{ width:100%;}
    #list h3{line-height: 30px; margin-left:10px;}
    #list p{ display: flex; justify-content: space-between;}
    #list p span{ margin:5px;}

    /* 针对pad pro  */
    @media all and (max-width:1024px){
        #list li{ width:32%;}
    }

    /* 针对pad mini 和 mobile 横屏  */
    @media all and (max-width:768px){
        #header .nav{ display: none; position: absolute; width:100%; top:50px;}
        #header .nav li{ height:50px; text-align: center; line-height: 50px; background:rgba(0,0,0,.5); border-top: 1px #7c7469 solid;}
        #header .menu{ display: block;}
        #header .logo{ width:120px; margin-left: 0;}

        #ad{ flex-wrap: wrap;}
        #ad .ad-1 , #ad .ad-2{ width:100%;}
        #ad .ad-2{ margin-top:10px;}

        #list li{ width:49%;}
    }

    /* 针对 mobile 竖屏  */
    @media all and (max-width:450px){
        #list{ margin:10px;}
        #list li{ width:98%;}
    }
    </style>
</head>
<body>
    <div id="header">
        <div class="menu">
            <a href="#">menu</a>
        </div>
        <div class="logo">
            <a href="#"><img src="./images/logo.png" alt=""></a>
        </div>
        <ul class="nav">
            <li><a href="#">文章</a></li>
            <li><a href="#">素材</a></li>
            <li><a href="#">活动</a></li>
            <li><a href="#">素材</a></li>
            <li><a href="#">活动</a></li>
            <li><a href="#">更多</a></li>
        </ul>
        <div class="login">
            <a href="#">登录</a>
        </div>
    </div>
    <div id="banner">
        <a href="#"><img src="./images/top-bg.png" alt=""></a>
    </div>
    <div id="ad">
        <div class="ad-1">
            <a href="#"><img src="./images/swiper1.jpeg" alt=""></a>
        </div>
        <div class="ad-2">
            <a href="#"><img src="./images/1.png" alt=""></a>
            <a href="#"><img src="./images/2.png" alt=""></a>
        </div>
    </div>

    <ul id="list">
        <li>
            <img src="./images/1.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/1.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/1.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/1.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/2.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/2.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/2.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/2.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/3.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/3.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/3.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
      
    </ul>

    <script>

    /* var menu = document.querySelector('.menu');
    var nav = document.querySelector('.nav');
    menu.onclick = function(){
        nav.style.display = 'block';
    }; */
    
    </script>
</body>
</html>
View Code

 

 

posted @ 2020-02-29 22:31  月亮没有酒  阅读(116)  评论(0)    收藏  举报