PC端移动端兼容响应式布局页面的制作

最新推荐文章于 2024-02-19 21:38:32 发布

JinYF1992

最新推荐文章于 2024-02-19 21:38:32 发布

阅读量2.4w

点赞数 6

文章标签：兼容响应式页面 web前端

本文链接：https://blog.csdn.net/jinyf1992/article/details/51603786

版权

之前已经制作了PC端固定布局和移动端流体布局的页面，这次的任务就是将一个页面制作成PC端移动端兼容响应式布局页面，是页面能在不同屏幕大小下呈现处不同最佳显示状态。

主要的过程就是对：

1.将width改为max-width，来适应屏幕的变动来改变自身宽度等。其他亦然。

/*媒体查询，参考部分Bootstarp框架*/
/*当页面大于1200px时，大屏幕，主要显示PC端*/
@media (min-width: 1200px){}

/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px){}

/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px){}

/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px){}

/*在小于480px的屏幕里，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px){}

  
  
   
   

  
  
  
  
   
   以上标签的使用，当屏幕像素多少时，各板块样式的显示方式改变。
  
  
  
  
   
   

  
  
  
  
   
   例如导航栏在PC屏幕和移动端屏幕之下，显示的选项卡数量可以不同。
  
  
  
  
   
   

  
  
  
  
   
   上图：
  
  
  
  
   
   PC端时显示页头：
  
  
  
  
   
   
  
  
  
  
   
   页尾：
  
  
  
  
   
   
  
  
  
  
   
   

  
  
  
  
   
   移动端时显示页头：
  
  
  
  
   
   
  
  
  
  
   
   

  
  
  
  
   
   页尾：
  
  
  
  
   
   
  
  
  
  
   
   

  
  
  
  
   
   
   
   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>个人页面导航 兼容</title>
    <style>
    body {font-family:sans-serif;overflow-x:hidden; }

    body,h1,h2,h3,ul,p,ol,form,fieldset,figure{
        margin: 0;
        padding: 0;
    }

    div,figure,img,input,button{
        box-sizing: border-box;
    }
    body {
        background-color: #f5f5f5;
        font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft YaHei UI","Microsoft YaHei",SimHei,"宋体",SimSun,Sans-Serif;
    }
    img{
        display: block;
        max-width: 100%;
    }
    ul,ol {
        list-style: outside none none;
    }
    a{
    text-decoration: none;
    }
    .none{
    display: none;
    }

    .sm-visible{
        display: none;
    }
    .clearfix:after{
        content: ".";
        height: 0;
        visibility: hidden;
        display: block;
        clear: both;
    }
    #header {
    width: 100%;
    height: 65px;
    background-color:#333;
    box-shadow: 0 11px 10px rgba(0,0,0,0.3);//导航栏阴印
    position: fixed;
        top:0;
    z-index: 9999;
    }
    #header .center{
    max-width: 1263px;
    height: 65px;
    margin: 0 auto;
    }
    #header .logo{
    margin: 1px;
    width:30%;
    height:62px;
    background:url(img/LOGO.png) no-repeat left;
    text-indent: -9999px;
    float: left;
    }
    #header .link{
    width: 69%;
    height: 65px;
    line-height: 65px;
    color: #eee;
    float: right;
    }
    #header .link li{
    width: 33.3%;
    text-align: center;
    float: right;
    }
    #header .link a{
    color: #eee;
    display: block;
    }
    #header .link a:hover,
    #header .active a{
    background-color: #000;
    }

    #search{
    width: 100%;
    max-width: 1920px;
    height: 550px;
    background: url(img/海岛.jpg) no-repeat center;
    position: relative;
        margin: 0 auto;
        padding: 70px 0 0 0;
    }


    #search .center{
    width: 40%;
    height: 60px;
    background-color: #000;
    position:absolute ;
    top:50%;
    left: 50%;
    margin: -10px 0 0 -20%;
    opacity: 0.6;
    border-radius: 10px;
    }

    #search .copy{
        opacity: 1;
        background-color: transparent;
        padding: 3px 3px 0 3px;
    }

    #search .search{
    width: 70%;
    height: 54px;
    background-color: #fff;
    color: #666;
    border: 1px solid #666;
    border-radius: 10px;
    font-size: 24px;
    padding: 0 10px;
    outline: none;
        display: block;
        float: left;
    }

    #search .button{
    width: 30%;
    height: 54px;
    background-color: #eee;
    color: #666;
    border: 1px solid #333;
        border-left-width: 3px;
    border-radius: 10px;
    font-size: 24px;
    outline: none;
    cursor: pointer;
    font-weight: bold;
        display: block;
        float: right;
    }

    #menu{
    max-width: 1263px;
    margin: 30px auto;
    text-align: center;
    }


    #menu .center h2{
    font-size: 45px;
    letter-spacing: 2px;
    color: #666;
    margin: 10px 0;
    }

    #menu .center p{
    color: #666;
    margin: 10px;
        font-size: 16px;
    }

    #menu figure{
    border: 1px solid  #ddd;
        display: inline-block;
    padding: 4px;
    border-radius: 4px;
    margin: 25px 0.4%;
        width: 31%;
    text-align: left;
    position: relative;
    }

    #menu figure img{
    vertical-align:middle;
    }

    #menu .sat{
    float:right;
    font-size: 13px;
    color: #999;
    font-style: normal;
    position: relative;
    top:5px;
    right: 5px;
        line-height: 15px;
        overflow: hidden;
    }

    #menu .score{
    color: #f60;
    font-size: 14px;
        line-height: 15px;
        overflow: hidden;
    }

    #menu .score strong{
    font-size: 20px;
    letter-spacing: 1px;
    }

    #menu .type{ // 标签
    width: 90px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background-color:#ccc;
    position: absolute;
    top:4px;
    left: 4px;
    }

    /*媒体查询，参考部分Bootstarp框架*/
    /*当页面大于1200px时，大屏幕，主要显示PC端*/
    @media (min-width: 1200px){
    }
    /*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
    @media (min-width: 992px) and (max-width: 1199px){
        #search .center{
            width: 50%;
            margin: -10px 0 0 -25%;
        }
        #menu .center h2{
            font-size: 40px;
        }
    }
    /*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
    @media (min-width: 768px) and (max-width: 991px){
        #search .center{
            width: 60%;
            margin: -10px 0 0 -30%;
        }
        #search .search, #search .button{
            font-size: 20px;
        }
        #menu .center h2{
            font-size: 35px;
        }
    }
    /*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
    @media (min-width: 480px) and (max-width: 767px){
        #header,#header .link,#header .center{
            height: 45px;
        }
        #header .logo, .sm-hidden{
            display: none;
        }
        #header .link{
            width: 100%;
            line-height: 45px;
        }
        #search{
            padding: 45px 0 0 0;
        }
        #search .center{
            width: 70%;
            height: 53px;
            margin: -10px 0 0 -35%;
        }
        #search .search, #search .button{
            height: 45px;
            font-size: 18px;
        }
        .sm-visible{
            display: block;
        }
        #menu .center h2{
            font-size: 30px;
        }
        #menu .center p{
            font-size: 15px;
        }
        #menu figure{
            width: 49.2%;
        }
    }
    /*在小于480px的屏幕里，微小屏幕，更低分辨率的手机*/
    @media (max-width: 479px){
        #header,#header .link,#header .center{
            height: 45px;
        }
        #header .logo, .xs-hidden, .sm-hidden{
            display: none;
        }
        #header .link{
            width: 100%;
            line-height: 45px;
        }
        #header .link li{
            width: 50%;
        }
        #search{
            padding: 45px 0 0 0;
        }
        #search .center{
            height: 48px;
            width: 80%;
            margin: -10px 0 0 -40%;
        }
        #search .search, #search .button{
            height: 40px;
            font-size: 16px;
        }
        .sm-visible{
            display: block;
        }
        #footer .bottom, #footer .version{
            font-size: 13px;
        }
        #menu .center h2{
            font-size: 26px;
        }
        #menu .center p{
            font-size: 14px;
        }
        #menu figure{
            width: 99%;
        }
    }

    #footer{
    width: 100%;
    background-color: #83858C;
    text-align: center;
    }

    #footer .top{
        max-width: 1263px;
    width:1263px;
    height: 280px;
    margin: 0 auto;
    }

    #footer .version{
        color: #777;
        text-align: center;
        padding: 10px;
    }
    #footer .block{
    width:33.3%;
    height: 320px;
    text-align: left;
    color: #ccc;
    vertical-align: top;
display: block;
        float: left;
    }

    #footer a:link,
    #footer a:visited {
    color:#000000;
    text-decoration:underline;
    }
    #footer a:hover,
    #footer a:active {
    color:#e0e7ec;
    text-decoration:none;
    }

    #footer h2{
    font-size: 24px;
    font-weight: normal;
    padding: 20px 0 0 20px;
    }

    #footer hr{
    width: 90%;
    border: 1px dashed #333;
    }

    #footer ul{
    font-size: 18px;
    color: #000000;
    text-indent: 20px;
    line-height: 2;
    }

    #footer .bottom{
    padding: 15px 0;
    background-color: #000;
    color: #777;
    text-align: center;
    border-top: 1px solid #444;
    }

</style>
</head>

<body>

<header id="header">
    <div class="center">
        <h1 class="logo"></h1>
        <nav class="link">
            <h2 class="none">导航</h2>
            <ul>
        <li><a href="tencent://message/?uin=">启动QQ</a></li>
        <li><a href="https://wx.qq.com/" target="_blank"><span class="xs-hidden">网页版微信</span>打开微信</a></li>
        <li class="xs-hidden"><a href="http://weibo.com/" target="_blank">新浪微博</a></li>
            </ul>
        </nav>
    </div>
</header>
<div id="search">
    <div class="center"></div>
    <div class="center copy">
    <form οnsubmit="return baiduWithHttps(this)" action="http://www.baidu.com/baidu" target="_blank">
        <input name="tn" type="hidden" value="SE_zzsearchcode_shhzc78w">
        <a href="https://www.baidu.com/" target="_blank"></a>

        <input type="text"  οnfοcus="checkHttps" placeholder="输入搜索相关内容" class="search" name="word"  size="30">

        <button type="submit" value="搜索" class="button">搜索</button>
    </form>
    <script src="http://s1.bdstatic.com/r/www/cache/global/js/BaiduHttps_20150714_zhanzhang.js"></script>
    <script>
        function checkHttps () {
            BaiduHttps.useHttps();
        }
        function baiduWithHttps (formname) {
            var data = BaiduHttps.useHttps();
            if (data.s === 0) {
                return true;
            }
            else {
                formname.action = 'https://www.baidu.com/baidu' + '?ssl_s=1&ssl_c' + data.ssl_code;
                return true;
            }
        }
    </script>
    </div>

</div>
<div id="menu">
<section  class="center">
    <h2>常用</h2>
    <p>pc端，移动端，兼容响应式页面。</p>
</section>
    <figure>
        <a href="http://www.qq.com/" target="_blank"></a>
        <img src="img/腾讯.jpg" alt="">
        <div>
            <em class="sat">中国浏览量最大的中文门户网站</em>
            <span class="score"><strong>腾讯网</strong></span>
        </div>
        <div class="type">腾讯</div>
    </figure>
    <figure>
        <a href="http://www.sina.com.cn/" target="_blank"></a>
        <img src="img/sina.jpg" alt="">
        <div>
            <em class="sat">为全球用户24小时提供全面及时的中文资讯</em>
            <span class="score"><strong>新浪网</strong></span>
        </div>
        <div class="type">新浪</div>
    </figure>
    <figure>
        <a href="http://www.163.com/" target="_blank"></a>
        <img src="img/网易.jpg" alt="">
        <div>
            <em class="sat">最有态度的网站</em>
            <span class="score"><strong>网易</strong></span>
        </div>
        <div class="type">网易</div>
    </figure>
    <figure>
        <a href="http://www.huxiu.com/" target="_blank"></a>
        <img src="img/虎嗅.png" alt="">
        <div>
            <em class="sat">带给你最新的资讯</em>
            <span class="score"><strong>虎嗅</strong></span>
        </div>
        <div class="type">虎嗅</div>
    </figure>
    <figure>
        <a href="https://www.zhihu.com/" target="_blank"></a>
        <img src="img/知乎.png" alt="">
        <div>
            <em class="sat">知无不言</em>
            <span class="score"><strong>知乎</strong></span>
        </div>
        <div class="type">知乎</div>
    </figure>
    <figure>
        <a href="http://36kr.com/" target="_blank"></a>
        <img src="img/36kr.jpg" alt="">
        <div>
            <em class="sat">为创业者提供最好的产品和服务</em>
            <span class="score"><strong>36氪</strong></span>
        </div>
        <div class="type">36kr</div>
    </figure>
    <figure>
        <a href="http://www.woshipm.com/" target="_blank"></a>
        <img src="img/人人都是产品经理.jpg" alt="">
        <div>
            <em class="sat">产品经理、产品爱好者学习交流平台</em>
            <span class="score"><strong>人人都是产品经理</strong></span>
        </div>
        <div class="type">人人都是产品经理</div>
    </figure>
    <figure>
        <a href="http://www.iqiyi.com/" target="_blank"></a>
        <img src="img/爱奇艺.jpg" alt="">
        <div>
            <em class="sat">中国领先的视频门户</em>
            <span class="score"><strong>爱奇艺</strong></span>
        </div>
        <div class="type">爱奇艺</div>
    </figure>
    <figure>
        <a href="http://www.youku.com/" target="_blank"></a>
        <img src="img/youku.png" alt="">
        <div>
            <em class="sat">中国领先的视频网站</em>
            <span class="score"><strong>优酷</strong></span>
        </div>
        <div class="type">优酷</div>
    </figure>
    <figure>
        <a href="https://www.douban.com/" target="_blank"></a>
        <img src="img/豆瓣.png" alt="">
        <div>
            <em class="sat">提供图书、电影、音乐唱片的推荐</em>
            <span class="score"><strong>豆瓣</strong></span>
        </div>
        <div class="type">豆瓣</div>
    </figure>
    <figure>
        <a href="http://bbs.hupu.com/" target="_blank"></a>
        <img src="img/hupu.png" alt="">
        <div>
            <em class="sat">最专业的篮球网站</em>
            <span class="score"><strong>虎扑</strong></span>
        </div>
        <div class="type">虎扑</div>
    </figure>
    <figure>
        <a href="http://www.jianshu.com/" target="_blank"></a>
        <img src="img/简书.png" alt="">
        <div>
            <em class="sat">最简洁的博客</em>
            <span class="score"><strong>简书</strong></span>
        </div>
        <div class="type">简书</div>
    </figure>
    <figure>
        <a href="https://www.taobao.com/" target="_blank"></a>
            <img src="img/淘宝.jpg" alt="">
            <div>
                <em class="sat">只有想不到，没有买不到</em>
                <span class="score"><strong>淘宝</strong></span>
            </div>
            <div class="type">淘宝</div>
    </figure>
    <figure>
        <a href="http://www.qunar.com/" target="_blank"></a>
            <img src="img/去哪儿.png" alt="">
            <div>
                <em class="sat">特价机票,超值酒店,省心省钱,聪明你的旅行!</em>
                <span class="score"><strong>简书</strong></span>
            </div>
            <div class="type">去哪儿</div>
    </figure>
    <figure>
        <a href="http://www.meituan.com/" target="_blank"></a>
            <img src="img/美团.png" alt="">
            <div>
                <em class="sat">吃喝玩乐好帮手,专业品质团购网</em>
                <span class="score"><strong>美团</strong></span>
            </div>
            <div class="type">美团</div>
    </figure>
    <div class="clearfix"></div>
</div>

    <footer id="footer">
        <div class="top sm-hidden">
         <div class="block left">
             <h2>文艺</h2>
             <hr>
             <ul>
                 <li><a href="https://wuzhi.me/last" target="_blank">吾志</a></li>
                 <li><a href="http://www.kdatu.com/" target="_blank">看大图</a></li>
                 <li><a href="http://youqu.de/" target="_blank">有趣的</a></li>
                 <li><a href="http://www.sketchswap.com/" target="_blank">一画换一画</a></li>
                 <li><a href="http://www.topit.me/" target="_blank">收录美好的图片it.me</a></li>
             </ul>
         </div>

        <div class="block center">
            <h2>小众</h2>
            <hr>
            <ul>
                <li><a href="http://www.qingfanqie.com/" target="_blank">青番茄</a></li>
                <li><a href="http://www.duitang.com/" target="_blank">堆糖网 </a></li>
                <li><a href="http://www.xiachufang.com/" target="_blank">下厨房</a></li>
                <li><a href="http://ondream.org/" target="_blank">在梦上</a></li>
                <li><a href="http://xianguo.com/hot" target="_blank">鲜果</a></li>
            </ul>
        </div>

        <div class="block right">
            <h2>青年</h2>
            <hr>
            <ul>
                <li><a href="http://www.zimuzu.tv/" target="_blank">人人影视</a></li>
                <li><a href="http://www.xiangdang.net/" target="_blank">香当</a></li>
                <li><a href="http://www.blouth.com/portal.php" target="_blank">花开暖年</a></li>
                <li><a href="http://blah.me/category/21" target="_blank">Blah书库</a></li>
                <li><a href="http://www.u148.net/" target="_blank">有意思吧</a></li>
            </ul>
        </div>
        </div>
        <div class="version sm-visible">
            客户端 | 触屏版 | 电脑版
        </div>
        <div class="bottom">Copyright © Jin<span class="sm-hidden">| 浙</span></div>
    </footer>

</body>
</html>

JinYF1992

关注

6
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
PC端移动端兼容响应式布局页面的制作

之前已经制作了PC端固定布局和移动端流体布局的页面，这次的任务就是将一个页面制作成PC端移动端兼容响应式布局页面，是页面能在不同屏幕大小下呈现处不同最佳显示状态。主要的过程就是对：1.将width改为max-width，来适应屏幕的变动来改变自身宽度等。其他亦然。2./*媒体查询，参考部分Bootstarp框架*//*当页面大于1200px时，大屏幕，
复制链接

扫一扫