响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向。实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们去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="data: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+的时候:

像素位于640到1000时:

像素小于640时:

点击下拉收起:

就完成了这次的导航响应式布局操作,后面还会分享更多内容,在这里我个人觉得dwcc2015+版本的软件对于前端来说有一定的好处,就是可以调整屏幕像素进行布局,当然了其中的bootstrap组件也可以完成相应的内容啦,而且还有精致的魔板提供给你,当然了纯属个人爱好,有兴趣的朋友可以下载去玩玩。

后面我还会分享更多,包括html5的canvas动画,和transform的关键帧动画,以实际例子来分享吧,也是自己在用的比如什么点水动画,地图效果。

新人一枚希望和大家一起学习交流啦。

html5+css3+jquery完成响应式布局的更多相关文章

  1. HTML5+CSS3实现的响应式垂直时间轴

    <!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name=&qu ...

  2. 超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)

    在线演示 使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)

  3. Css3中的响应式布局的应用

    Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel= ...

  4. css3 @media 实现响应式布局

    使用css3的@media,可以实现针对不同媒体.不同分辨率的响应式布局. 方法1:根据不同分辨率使用不同css文件 <link rel="stylesheet" media ...

  5. java springmvc +spring+ mybaits 模块化开发框架 HTML5+css3.0+bootstrap响应式开发界面

    需要源码,请加QQ:858-048-581 系统模块 1.   权限管理:点开二级菜单进入三级菜单显示 角色(基础权限)和按钮权限       角色(基础权限): 分角色组和角色,独立分配菜单权限和增 ...

  6. CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)

    点评:Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式   Med ...

  7. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  8. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  9. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

随机推荐

  1. 基于Lease分布式系统重试服务选举

    /** * Copyright (c) 2015, www.cubbery.com. All rights reserved. */ package com.cubbery.event.retry; ...

  2. java基础知识(五)java类

    类是java的核心和本质,是java语言的基础. 一.java中的类 1.类class 一个类可以包含局部变量.实例变量.类变量(静态变量) 一个类至少有一个构造方法,如果没有,系统会默认给出一个无参 ...

  3. Network

    App Icon: http://www.easyicon.net/

  4. 读取图像,LUT以及计算耗时

    使用LUT(lookup table)检索表的方法,提高color reduce时对像素读取的速度. 实现对Mat对象中数据的读取,并计算color reduce的速度. 方法一:使用Mat的ptr( ...

  5. JS判断字符串长度(中文长度为2,英文长度为1)

    目的:计算字符串长度(英文占1个字符,中文汉字占2个字符) 方法一: String.prototype.gblen = function() { var len = 0; for (var i=0; ...

  6. Android下LayoutInflater的使用

    在我们想XML布局文件转换为View对象的时候.我们都会使用LayoutInflate对象.顾名思义咋一眼就能看出来他是布局填充器.那么接下来看看LayoutInfalte的使用 总体分为 Layou ...

  7. DevExpress Ribbon右上角button显示文本设置

    设置ribboncontrol.ShowItemCaptionsInPageHeader 属性为true

  8. NXP NFC移植及学习笔记(原创)

    NFC功能介绍 NFC 目前使用的三种功能: 1. P2P模式:基于LLCP协议的基础上,以NDEF数据交换格式来通信. 2. 读写模式:当作为读卡器,对NFC Tag的读写. 3. 卡模拟模式:模块 ...

  9. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  10. thinkPHP get

    大家都知道{Think.get.name}是输出get的值但是链接是输不出来的所以我现在先告诉大家一个简单的get值获取,直接在需要get值的链接里写$_GET['name'];就可以使get值附值给 ...