UDN-企业互联网技术人气社区
登录
注册
搜索
本版
文章
帖子
用户
搜索
本版
文章
帖子
用户
移动下载
试试手气
每日签到
首页
论坛
开发者大赛2020
资源工具
云品秀
学习认证
赛事竞猜
云平台
YonBuilder_低代码开发平台
云品秀
数字化建模(业务中台)
云原生架构(技术中台)
数据中台
智能服务
开放连接
伙伴专区
云服务
YonBip
YonSuite
NCCloud
U8Cloud
管理软件
NC
U8
U9
企业互联网产品
开放平台
YonBuilder
友企联
通用技术
HTML5|CSS3
JavaScript
数据库
Docker|云计算
J2EE技术
DevOps
开源
招聘面试
社区服务
论坛事务区
IT资讯
板块导航
UDN每周精选
HTML5
UAP工具下载
营改增
主数据平台
前端开发
用友研发员工必备
UDN 企业互联网技术社区
»
论坛
›
通用技术:HTML5|CSS3
›
html5+css3+jquery完成响应式布局
返回
发表新主题
浏览 :
1947
回复 :
2
[CSS3]
html5+css3+jquery完成响应式布局
[复制链接]
htmlman
发布主题
回复的帖子
11055
积分
威望
活力
U币
发消息
当前离线
楼主
发表于 2017-1-2 15:55:42
|
显示全部楼层
|
阅读模式
jquery
HTML5
css3
响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,
前端
人员不得不跟上潮流的一个方向。实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们去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+的时候:
像素位于640到1000时:
像素小于640时:
点击下拉收起:
就完成了这次的导航响应式布局操作,后面还会分享更多内容,在这里我个人觉得dwcc2015+版本的软件对于前端来说有一定的好处,就是可以调整屏幕像素进行布局,当然了其中的bootstrap组件也可以完成相应的内容啦,而且还有精致的魔板提供给你,当然了纯属个人爱好,有兴趣的朋友可以下载去玩玩。
后面我还会分享更多,包括html5的canvas动画,和transform的关键帧动画,以实际例子来分享吧,也是自己在用的比如什么点水动画,地图效果。
相关帖子
•
基于jQuery的ajax系列之用FormData实现页面无刷新上传
•
jQuery的ajax方法向服务器发出get和post请求
•
CSS3特性修改(自定义)浏览器默认滚动条
•
在 DOM 中动态插入并执行脚本
•
懒加载原理分析
•
JQuery插件定义
•
CSS3-----图片翻页效果的展示
•
小心事件多次绑定
•
前端组件化的挑战与解决思路
•
H5移动端头像上传控件(支持移动和缩放)
使用道具
举报
回复
提升卡
置顶卡
变色卡
我亦王者
发布主题
回复的帖子
127
积分
威望
活力
U币
发消息
当前离线
发表于 2017-1-2 15:56:15
|
显示全部楼层
总觉得哪里有点问题啊
使用道具
举报
回复
狂战灬梦舞
发布主题
回复的帖子
147
积分
威望
活力
U币
发消息
当前离线
发表于 2017-1-2 15:56:16
|
显示全部楼层
还是挺有借鉴意义的
使用道具
举报
回复
返回
发表新主题
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
用微信扫一扫
互动赢积分
关于我们
网站简介
友链交换
免责声明
联系我们
电话:010-86393388
邮件:
udn@yonyou.com
地址:北京市海淀区北清路68号
移动客户端下载
安卓客户端
苹果客户端
关注我们
微信公众号:yonyouudn
扫描右侧二维码关注我们
专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041
京ICP备05007539号-11
京公网网备安1101080209224
Powered by Discuz!
快速回复
返回列表
返回顶部