UDN-企业互联网技术人气社区

板块导航

浏览  : 1529
回复  : 2

[CSS3] html5+css3+jquery完成响应式布局

[复制链接]
htmlman的头像 楼主
发表于 2017-1-2 15:55:42 | 显示全部楼层 |阅读模式
  响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向。实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们去hack,现在是终端问题,让我展现出不同的设备不同的样式,折腾来折腾去,终于我们走进了热火朝天的响应式布局,自适应只能算是响应式布局的一个子集吧,对于流体个栅格后面会再次提到,有兴趣可以关注。

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

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

  html:
  1. <div class="navBox">
  2.     <div class="nav">
  3.         <ul>
  4.         <li class="current"><a href="#" target="_blank">首页<small>home</small></a></li>
  5.         <li><a href="#" target="_blank">电影<small>movie</small></a></li>
  6.         <li><a href="#" target="_blank">电视剧<small>tv play</small></a></li>
  7.         <li><a href="#" target="_blank">动漫<small>comic</small></a></li>
  8.         <li><a href="#" target="_blank">综艺<small>variety</small></a></li>
  9.         <li><a href="#" target="_blank">纪录片<small>documentary</small></a></li>
  10.         <li><a href="#" target="_blank">公开课<small>public resourse</small></a></li>
  11.         </ul>
  12.         <!--match IE9,IE10 or not ie-->
  13.         <!--[if (get IE 8) | ! (IE)]><!-->
  14.         <h1 class="title"><a href="#">腾讯视频</a><span class="btn"><img src="image/btn.png" width="34" height="34" alt=""/></span></h1>
  15.         <!--<![endif]-->
  16.     </div>
复制代码

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

  css:
  1. @charset "utf-8";
  2. /* CSS Document */
  3. *{
  4.     padding:0px;
  5.     margin:0px;
  6.     border:0px;
  7. }
  8. .navBox {
  9.     width:100%;
  10.     height:40px;
  11.     background:#333;
  12. }
  13. .nav{
  14.     margin:0 auto;
  15.     border:0px solid #ccc;
  16. }
  17. .nav ul {
  18.     list-style:none;
  19.     width:auto;
  20. }
  21. .nav ul li {
  22.     height:40px;
  23.     text-align:center;
  24. }
  25. .nav ul li a {
  26.     display:block;
  27.     font-size:16px;
  28.     text-decoration:none;
  29.     line-height:39px;
  30.     color:rgba(103,204,247,1.00);
  31. }
  32. @media screen and (min-width: 1000px) {
  33. .nav{
  34.     width:1000px;
  35.     height:40px;
  36. }
  37. .nav ul li {
  38.     float:left;
  39.     width:auto;
  40.     min-width:120px;
  41.     margin-left:10px;   
  42. }
  43. .nav ul li.current {
  44.     background:#f60;
  45. }
  46. .nav ul li:hover a {
  47.     background-color:#f60;
  48. }
  49. .nav ul li.current:hover a {
  50.     color:#fff;
  51. }
  52. .nav .title {
  53.     display:none;
  54. }   
  55. }
  56. @media screen and (min-width: 640px) and (max-width: 1000px) {
  57. .nav {
  58.     width:auto;
  59.     height:40px;
  60. }
  61. .nav ul li {
  62.     float:left;
  63.     width:14%;
  64.     min-width:80px;
  65.     font-size:12px;
  66.     line-height:20px;
  67. }
  68. .nav ul li.current {
  69.     background-color:#f60;
  70. }
  71. .nav ul li:hover a {
  72.     background-color:#f60;
  73. }
  74. .nav ul li.current:hover a {
  75.     color:#fff;
  76. }
  77. small {
  78.     display:none;
  79. }
  80. .nav .title {
  81.     display:none;
  82. }   
  83. }
  84. @media screen and (max-width: 640px) {
  85.     .navBox {
  86.         height:auto;
  87.         background:#444;
  88.     }
  89.     .nav {
  90.         width:auto;
  91.         height:auto;
  92.     }
  93.     .nav ul {
  94.         position:relative;
  95.         display:none;
  96.     }
  97.     .nav ul li {
  98.         width:100%;
  99.         min-width:100px;
  100.         background:#333;
  101.     }
  102.     .nav ul li a:active,
  103.     .nav ul li a:hover {
  104.         background-color:#f60;
  105.         transition:all ease-in 0.3s;
  106.     }
  107.     .nav ul li.current{
  108.         background-color:#f60;
  109.     }
  110.     .nav .title {
  111.         position:relative;
  112.         width:100%;
  113.         height:40px;
  114.         border-top:1px solid #444;
  115.         background:#333;
  116.         text-align:center;
  117.         letter-spacing:1px;
  118.         font-size:24px;
  119.         line-height:40px;
  120.     }
  121.     .nav .title a {
  122.         color:#f60;
  123.         text-decoration:none;
  124.     }
  125.     .nav .title .btn {
  126.         position:absolute;
  127.         right:10px;
  128.         top:0px;
  129.         width:34px;
  130.         cursor:pointer;
  131.     }
  132.     }
复制代码

  我把屏幕区间设置成三个不同的区间,@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代码:
  1. <script type="text/JavaScript">
  2. $(document).ready(function (){
  3.     $(".btn").on("click",function(){
  4.         $(".nav").find("ul").slideToggle(400);
  5.         });   
  6. })
  7. </script>
复制代码

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

  像素位于1000+的时候:
4.png

  像素位于640到1000时:
3.png

  像素小于640时:
2.png

  点击下拉收起:
1.png

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

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

相关帖子

发表于 2017-1-2 15:56:15 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

发表于 2017-1-2 15:56:16 | 显示全部楼层
还是挺有借鉴意义的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部