css响应式网页实战

第五节

  • 响应式改造页头
  • 响应式改造内容
  • 响应式底部导航列表
  • 底部交互及细节优化
  • 压轴好戏~

响应式改造页头

页头的元素比较少，所以这次不用另外写小屏幕替代品，直接把原来的尺寸改小就可以了。
当窗口宽度小于980px的时候页头的元素已经乱了，所以要先适配980px的宽度。

在这块页头注意不要一口气调到连768px以下的宽度也适配了，那样的话768px到980px之间的页头看起来就会偏小，也不好看，还是根据具体情况而定的。 

                            
@media screen and (max-width: 980px) {
    .header .banner {
        padding: 50px 0;
        height: auto;
        text-align: center;
    }

    .header .banner .large-img {
        display: inline-block;
        float: none;
        width: 200px;
    }

    .header .banner .intro {
        display: inline-block;
        float: none;
        margin-top: 90px;
        width: 300px;
        height: auto;
        vertical-align: top;
    }

    .header .banner .intro img {width: 200px; }
    .header .banner .info h2 {font-size: 20px; }
    .header .banner .info a {font-size: 14px; }
}

再调整768px的适配方案

你也可以自己决定怎么适配调整，比如小屏幕可以改成上下结构，或者可以适配更大屏幕的方案。 

                            
@media screen and (max-width: 768px) {
    .header .banner .large-img {width: 100px; }
    .header .banner .intro {
        margin: 0;
        width: 300px;
        vertical-align: baseline;
    }

    .header .banner .intro img {width: 150px; }
}

响应式改造内容

内容区域默认是四大天王并齐一排的，现在由于场子变小了得选出两个更强的坐第一排，其余两个被挤到第二排。 

                        
@media screen and (max-width: 980px) {
    .section .products li {width: 50%; }
}

但是场子越来越小，恐怕两个一排也容不下了，只能选出个最强的依次排下来。 

                        
@media screen and (max-width: 640px) {
    .section .products li {width: 100%; }
}

我的建议是这么排的，你也可以自己决定！

响应式底部导航列表

底部导航的响应式套路可以跟页头导航一样的，只是不需要像页头导航为了美观准备多个备胎了。
小屏幕下列表排成竖排，把列表隐藏起来，只显示标签。 

                        
@media screen and (max-width: 768px) {
    .footer {
        padding: 20px;
        height: auto;
    }

    .footer .footer-nav .column {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .footer .footer-nav .column .label {
        height: 30px;
        border-bottom: 1px solid #ddd;
        font-weight: normal;
        font-size: 14px;
        line-height: 30px;
        cursor: pointer;
    }

    .footer .footer-nav .column .label.mar-top {margin-top: 0; }
    .footer .footer-nav .column ul {display: none; }
    .footer .footer-nav .column ul.show {display: block; }
    .footer .footer-nav .column ul a {
        display: block;
        width: 100%;
        padding: 5px;
    }
}

底部交互及细节优化

当用户点击标签的时候，标签带着它后面的兄弟们冲出来。
在每个标签元素上增加onclick点击事件。

在触发点击事件的时候传入this即代表了该元素，因为需要找到当前标签后面的兄弟们，不要找错了 

                        
<h6 class="label" onclick="toggleFooterNav(this)"></h6>

因为列表数量庞大，标签传入了this就不用去找控制显示隐藏的列表id，也不用给每个列表加对应的id了，通过javascript找到兄弟元素就可以了。
在javascript面板中声明 toggleFooterNav() ，通过点击事件控制列表导航显示隐藏 

                        
function toggleFooterNav(ele){
        ele.nextSibling.nextSibling.classList.toggle('show')
}

最后是底部版权的改造，这个项目就大功告成啦！ 

                        
@media screen and (max-width: 768px) {
    .footer .legal .legal-link {
        width: 100%;
        margin: 10px 0;
        line-height: 25px;
    }

    .footer .locale {float: left; }
}

压轴好戏~

期待已久的压轴好戏终于到来了！
这里可以将你在编辑器里写的网页生成一个真正能通过网址访问的网页哟！

点击生成属于你的作品

这事还没完，如果你用手机访问生成的页面，应该会发现页面好小吧，是不是感觉哪里不对呢？！
仔细想想又好像是因为手机分辨率高，那么它应该也是跟着分辨率决定屏幕尺寸的吧？！
但是别人的页面做出来的元素尺寸好像看起来跟桌面端差不多大啊？！

所以我要隆重介绍真正的压轴好戏了！

移动设备一般都有另一个叫viewport的尺寸，这是开发者针对高分辨率设备（或者叫视网膜屏幕）的设计尺寸，根据不同的分辨率密度决定以一定的比例形成一个缩放的尺寸，就是能够在桌面端看起来能跟移动端看起来差不多大的意思。具体可以 深入了解一下

在 <head></head> 里面加入下面一句代码，再生成一下用手机访问试试 

                        
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

具体的每个属性就不一一介绍了，网上文章一大把，自己深入了解一下吧

本教程已完结

想要更多好玩的教程请联系下方邮箱
lipten@foxmail.com