html5+css3+jquery完成响应式布局

首页 > 代码库 > html5+css3+jquery完成响应式布局

html5+css3+jquery完成响应式布局

2024-08-28 19:20:26 236人阅读

响应式布局，流体布局，自适应布局，静态布局等等，这是移动设备的飞速发展，前端人员不得不跟上潮流的一个方向。实际上各种设备尺寸，分辨率大都不同，真的适应各种设备依旧是不现实的，首先是浏览器差异化，让我们去hack，现在是终端问题，让我展现出不同的设备不同的样式，折腾来折腾去，终于我们走进了热火朝天的响应式布局，自适应只能算是响应式布局的一个子集吧，对于流体个栅格后面会再次提到，有兴趣可以关注。

首先讲讲实现原理吧，css3的媒体查询功能的确帮了我们很大一个忙，@media query，它的出现也带出了响应式布局的一连串东西，经典的是来自国外伟人的布局这里就不多阐述，我待会儿会提出一个实际的例子，本人测试过有效。@media query它可以检查我们的设备的分辨率，但是我们往往是设置一个区间，这样一个区间一个区间的去布局代码，让我们在手机端打开是一个效果，pc端一个效果，平板一种样式。

注意一点，手机网站不等于在手机端打开网页，这是两个不同的概念。手机网站我一直是使用jquery mobile 实现的前端设计，话不多说看代码：

html：

<div class="navBox">
    <div class="nav">
        <ul>
        <li class="current"><a href="#" target="_blank">首页<small>home</small></a></li>
        <li><a href="#" target="_blank">电影<small>movie</small></a></li>
        <li><a href="#" target="_blank">电视剧<small>tv play</small></a></li>
        <li><a href="#" target="_blank">动漫<small>comic</small></a></li>
        <li><a href="#" target="_blank">综艺<small>variety</small></a></li>
        <li><a href="#" target="_blank">纪录片<small>documentary</small></a></li>
        <li><a href="#" target="_blank">公开课<small>public resourse</small></a></li>
        </ul>
        <!--match IE9,IE10 or not ie-->
        <!--[if (get IE 8) | ! (IE)]><!-->
        <h1 class="title"><a href="#">腾讯视频</a><span class="btn"><img src="image/btn.png" width="34" height="34" alt=""/></span></h1>
        <!--<![endif]-->
    </div>

这里识别了一次ie,但是我并没有设置其IE6-8的样式，就测试玩玩。

css：

@charset "utf-8";
/* CSS Document */
*{
    padding:0px;
    margin:0px;
    border:0px;
}
.navBox {
    width:100%;
    height:40px;
    background:#333;
}
.nav{
    margin:0 auto;
    border:0px solid #ccc;
}
.nav ul {
    list-style:none;
    width:auto;
}
.nav ul li {
    height:40px;
    text-align:center;
}
.nav ul li a {
    display:block;
    font-size:16px;
    text-decoration:none;
    line-height:39px;
    color:rgba(103,204,247,1.00);
}
@media screen and (min-width: 1000px) {
.nav{
    width:1000px;
    height:40px;
}
.nav ul li {
    float:left;
    width:auto;
    min-width:120px;
    margin-left:10px;    
}
.nav ul li.current {
    background:#f60;
}
.nav ul li:hover a {
    background-color:#f60;
}
.nav ul li.current:hover a {
    color:#fff;
}
.nav .title {
    display:none;
}    
}
@media screen and (min-width: 640px) and (max-width: 1000px) {
.nav {
    width:auto;
    height:40px;
}
.nav ul li {
    float:left;
    width:14%;
    min-width:80px;
    font-size:12px;
    line-height:20px;
}
.nav ul li.current {
    background-color:#f60;
}
.nav ul li:hover a {
    background-color:#f60;
}
.nav ul li.current:hover a {
    color:#fff;
}
small {
    display:none;
}
.nav .title {
    display:none;
}    
}
@media screen and (max-width: 640px) {
    .navBox {
        height:auto;
        background:#444;
    }
    .nav {
        width:auto;
        height:auto;
    }
    .nav ul {
        position:relative;
        display:none;
    }
    .nav ul li {
        width:100%;
        min-width:100px;
        background:#333;
    }
    .nav ul li a:active,
    .nav ul li a:hover {
        background-color:#f60;
        transition:all ease-in 0.3s;
    }
    .nav ul li.current{
        background-color:#f60;
    }
    .nav .title {
        position:relative;
        width:100%;
        height:40px;
        border-top:1px solid #444;
        background:#333;
        text-align:center;
        letter-spacing:1px;
        font-size:24px;
        line-height:40px;
    }
    .nav .title a {
        color:#f60;
        text-decoration:none;
    }
    .nav .title .btn {
        position:absolute;
        right:10px;
        top:0px;
        width:34px;
        cursor:pointer;
    }
    }

我把屏幕区间设置成三个不同的区间，@media screen and (min-width: 1000px){//放置像素1000+屏幕的css样式渲染网页，这里是做的导航菜单}

@media screen and (min-width: 640px) and (max-width: 1000px){//这里放置屏幕像素640到1000的css样式}

@media screen and (max-width: 400px) {//这里放置小于等于640像素的样式}

三个区间可以按照你的兴趣或者要求设置成不同的样式，不过大体样式建议相同，不然用户一打开了发现傻缺了，咋个不是这个网站了哇，于是果断关闭那就尴尬了。

jquery代码：

<script type="text/javascript">
$(document).ready(function (){
    $(".btn").on("click",function(){
        $(".nav").find("ul").slideToggle(400);
        });    
})
</script>

脚本代码很简单了，我就简单不去分辨他在那个区间了，因为他只有在屏幕像素小于640像素的时候才会出现并且被看到，其他的情况我都将其display隐藏了，完成这一步就可以看到我点击旁边的缩放标签弹出UL标签，下滑上拉的效果，总体来说还是非常简单的，下面附上三张对应不同尺寸的效果图。

像素位于1000+的时候：

技术分享