HTML5响应式设计
响应式设计的设计原理是通过CSS3的Media Queries来调整页面元素在不同屏幕分辨率下的显示。
在大多数的响应式设计页面中,都会使用如下的meta标记。
1 | < meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> |
除此之外主要使用的是max-width,min-width等判断屏幕尺寸的特性以及orientation判断设备方向的特性
1 2 | @media screen and (max-width: 980px) { /*屏幕宽度小于内容主题时的样式*/} @media screen and (orientation: portrait) {/*纵屏时的样式*/} |
通过JavaScript侦听窗口改变事件resize
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(window).resize(function () { var width = $(window).width();// 获取当前屏幕的宽度 }); let isMobile = { Android:function () { return navigator.userAgent.match(/Android/i) ? true : false }, BlackBerry:function () { return navigator.userAgent.match(/BlackBerry/i) ? true : false }, iOS:function () { return navigator.userAgent.match(/IPhone|iPad/i) ? true : false }, iPad:function () { return navigator.userAgent.match(/iPad/i) ? true : false }, windows:function () { return navigator.userAgent.match(/IEMobile/i) ? true : false }, any :function () { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.iPad() || isMobile.windows() ) } }; |
响应式设计案列:
1,响应式设计列表
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | *{ margin:0; padding:0; } body { background:#16A085; font-family:"Helvetica Neue", sans-serif; margin:4%; } h1{ font-size:90px; color:rgba(255,255,255,.8); text-align:center; margin:50px auto; } #content{ } #content article{ width:25%; float:left; box-sizing:border-box; padding:2%; text-align:center; margin-bottom:25px; } #content article h1{ font-size:36px; color:rgba(255,255,255,.9); margin:20px auto; } #content article p{ color:rgba(255,255,255,.7); } #content article img{ width:50%; } @media screen and (min-width: 768px) and (max-width: 979px) { #content article{ width:50%; position:relative; text-align:left; } #content article img{ width:20%; position:absolute; } #content article h1{ margin:0 0 20px 30%; text-align:left; } #content article p{ margin-left:30%; } #content article:nth-child(odd){ clear:both; } } @media screen and (max-width: 767px) { #content article{ width:50%; } #content article img{ width:40%; } #content article:nth-child(odd){ clear:both; } } @media screen and (max-width: 480px) { #content article{ width:100%; } } < section id="content"> < article > < img src="Calendar.png" alt="Calendar"> < h1 >Calendar</ h1 > < p >Duis vitae dapibus elit. Integer urna purus, convallis et magna ut, hendrerit molestie nisi. Morbi posuere sapien in dolor feugiat, lacinia sollicitudin justo vehicula. Proin quis pretium risus. </ p > </ article > < article > < img src="Clipboard.png" alt="Clipboard"> < h1 >Clipboard</ h1 > < p >Donec nisl lectus, euismod sit amet elementum id, tristique eu nulla. Integer vitae purus ut risus tincidunt scelerisque vitae nec dui. Quisque lobortis at augue nec finibus.</ p > </ article > < article > < img src="Mail.png" alt="Mail"> < h1 >Mail</ h1 > < p >Aliquam tempus faucibus metus vitae suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ p > </ article > < article > < img src="Pocket.png" alt="Pocket"> < h1 >Pocket</ h1 > < p >Aliquam consequat eleifend lacus, et molestie turpis volutpat nec. Pellentesque nulla diam, feugiat eu vestibulum porta, volutpat ac justo. Quisque in vehicula nisl. </ p > </ article > </ section > |
2,响应式内容图片
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | *{ margin:0; padding:0; } body { background:#3498DB; font-family:"Helvetica Neue", sans-serif; } h1{ font-size:56px; color:rgba(255,255,255,.9); margin:40px 0; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.4); } p{ font-size:18px; color:#FFF; line-height:1.4; margin-bottom:30px; } #content{ padding:10px 8%; } img{ float:left; margin:0 20px 20px 0; padding:10px; border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.4); max-width:100%; box-sizing:border-box; } img.right{ margin-left:20px; margin-right:0; float:right; } @media screen and (max-width: 1200px) { #content{ padding:10px 8%; } img{ width:calc(100% - 350px); } } @media screen and (max-width: 979px) { #content{ padding:10px 5%; } img{ width:50%; } } @media screen and (max-width: 767px) { #content{ padding:10px 20px; } img{ width:100%; } } |
1 2 3 4 5 6 7 8 | < section id="content"> < article > < h1 >Malesuada</ h1 > < img src="p1.jpg"> < p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros purus, suscipit finibus congue sit amet, fringilla eu arcu. Vestibulum pellentesque lacus vitae fermentum vulputate. Aliquam pharetra felis eu tempus imperdiet. Proin ultrices justo turpis, et fermentum sapien porttitor quis. Phasellus mauris enim, facilisis at purus vel, dignissim aliquet quam. Fusce quis nulla non tortor hendrerit congue. Cras convallis tellus a tortor malesuada placerat. Morbi et laoreet urna, id fringilla dui. Nunc a justo elit. Vivamus rhoncus, erat id aliquet tempus, leo nunc vulputate odio, quis lacinia velit felis a magna. In et arcu justo. Ut fermentum fermentum faucibus. Nulla sit amet placerat erat, eget tempor arcu. Praesent viverra nulla dictum nibh tincidunt, eget gravida elit lacinia. Aliquam semper malesuada sem eget tempus.</ p > < p >Morbi lectus ex, tempor at velit quis, consectetur suscipit ante. Etiam vehicula diam ac hendrerit tincidunt. Nullam rhoncus tellus eu urna rhoncus consectetur. Sed aliquam enim libero, pellentesque ultricies lorem sagittis eget. Duis quis nibh accumsan, tempus diam eget, posuere felis. Fusce aliquam feugiat velit, sit amet mollis felis eleifend varius. Mauris a metus vehicula, egestas nulla in, vestibulum arcu. Nam ac iaculis ex. Donec scelerisque lectus eget lectus ultrices semper. Proin in justo tristique, ultricies justo nec, faucibus dolor. Phasellus ultrices nec tortor eget aliquam. Donec a odio vel magna vestibulum vehicula. Nulla laoreet nibh urna, at pellentesque nisl iaculis a. Donec vitae purus ut nibh tristique fermentum sed non quam.</ p > </ article > </ section > |
3,响应式背景
访问响应式的页面都加载相同的图片,这导致了一种尴尬的情况,图片过大,则移动端流量难以承受,图片过小,则桌面端效果就大打折扣。
使用js动态检测页面尺寸的变化,继而有针对性的匹配加载响应的图片
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | html, body{ height:100%; } body { margin:0; padding:0; } #background{ height:100%; background-position:50% 50%; background-size:cover; } < div id="background" data-bg-xl="2880x1800.jpg" data-bg-l="1200x750.jpg" data-bg-m="980x613.jpg" data-bg-s="768x480.jpg" data-bg-xs="480x300.jpg"> < script type="text/javascript"> $(document).ready(function() { var bg = $("#background"); $(window).resize(function() { resizeBackground(); }); resizeBackground(); function resizeBackground(){ var winWidth = $(window).width(); if (winWidth>1200) { bg.css("background-image", "url('"+bg.attr("data-bg-xl")+"')"); } else if (winWidth>980) { bg.css("background-image", "url('"+bg.attr("data-bg-l")+"')"); } else if (winWidth>768) { bg.css("background-image", "url('"+bg.attr("data-bg-m")+"')"); } else if (winWidth>480) { bg.css("background-image", "url('"+bg.attr("data-bg-s")+"')"); } else { bg.css("background-image", "url('"+bg.attr("data-bg-xs")+"')"); } } }); </ script > |
4,响应式轮播图
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | *{ margin:0; padding:0; } body { background:#7F8C8D; font-family:"Helvetica Neue", sans-serif; color:rgba(255,255,255,.8); text-align:center; } h1{ font-size:42px; margin:30px auto; } #slideshow{ width:980px; height:450px; overflow:hidden; margin:0 auto; position:relative; } #slideshow ul, #slideshow ul li, #slideshow-nav{ list-style:none; position:absolute; } #slideshow-nav{ width:100%; bottom:20px; text-align:center; } #slideshow-nav span{ display:inline-block; border-radius:50%; width:15px; height:15px; font-size:0; background:rgba(255,255,255,.3); transition:all .5s; -webkit-transition:all .5s; margin:0 7px; cursor:pointer; user-select:none; /*使圆点不能被选中*/ -webkit-user-select:none; } #slideshow-nav span.active{ background:#FFF; } @media screen and (max-width: 979px) { #slideshow, ul, li, img{ width:100%; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | < h1 >Slideshow component</ h1 > < div id="slideshow"> < ul > < li >< img src="p1.jpg"></ li > < li >< img src="p2.jpg"></ li > < li >< img src="p3.jpg"></ li > < li >< img src="p4.jpg"></ li > </ ul > < div id="slideshow-nav"></ div > </ div > < script type="text/javascript" src="jquery-2.1.4.min.js"></ script > < script type="text/javascript"> $(document).ready(function() { var duration = 3000; //每张图片的持续显示时间 var speed = 1000; //图片切换的动画时间 var width = $('#slideshow').width(); //获得单张图片的宽度 var curIndex = 0; //设置当前显示图片的索引值 var totalIndex = $('#slideshow > ul > li').length; //获得总的图片数量 var timer; //设置一个计时变量 $('#slideshow > ul > li').each(function(index) { $(this).css("left", index*width+"px"); //设置轮播图片的横向排列 $('#slideshow-nav').append("< span >"+(index+1)+"</ span >"); //在导航中添加相应的节点 }); $('#slideshow-nav > span').each(function(index) { $(this).attr("index", index); //存储每个节点的索引值 $(this).click(function(){ //当span元素被点击时 curIndex = $(this).attr("index")-1; //刷新当前显示图片的索引值 clearTimeout(timer); //清除计时 move(); //重新执行move函数以显示该图片 }); }); $('#slideshow-nav > span').eq(0).addClass("active"); //设置第一个圆点为active var firstChild = $('#slideshow > ul > li').eq(0).clone(); //将第一张图片复制一份 $('#slideshow > ul').append(firstChild); //将该图片添加到列表最末 firstChild.css("left", totalIndex*width+"px"); //将复制的第一张图片显示在图片序列最右侧 function move(){ curIndex++; //使索引值加以1 if(curIndex>totalIndex){ //当索引值大于图片总数时 curIndex = 1; //表示当前应播放第2张图片 $('#slideshow > ul').css("left", "0px"); //将图片序列重置到原点 } for(var i=0; i < totalIndex ; i++){ $('#slideshow-nav > span').eq(i).removeClass("active"); //清除所有导航节点的active类 } if(curIndex === totalIndex){ $('#slideshow-nav > span').eq(0).addClass("active"); //如果当前索引值等于图片总数,则说明当前正显示第一张图片的副本,因此应激活第一个导航节点 }else{ $('#slideshow-nav > span').eq(curIndex).addClass("active"); //在其余情况下,则为当前导航节点添加active类 } $('#slideshow > ul').animate({left:width*curIndex*-1+"px"},speed); //为图片序列创建动画 timer = setTimeout(move,duration+speed); //设置延迟一定时间后执行move函数,延迟时间等于动画时长加上每张图片的持续显示时间 } timer = setTimeout(move,duration); //设置延迟一定时间后执行move函数,延迟时间等于每张图片的持续显示时间 $('#slideshow').css("height", $('img').height()+"px"); $(window).resize(function() { width = $('#slideshow').width(); $('#slideshow').css("height", $('img').height()+"px"); $('#slideshow > ul > li').each(function(index) { $(this).css("left", index*width+"px"); //设置轮播图片的横向排列 }); $('#slideshow > ul').stop().animate({left:width*curIndex*-1+"px"},0); }); }); </ script > |
5,响应式菜单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | @font-face { font-family: 'icon-font'; src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'), url('font/flat-ui-icons-regular.woff'), url('font/flat-ui-icons-regular.svg'); } *{ margin:0; padding:0; } body { background:#FFF; margin:5%; font-family:"Helvetica Neue", sans-serif } #page-nav{ position:relative; } #page-nav ul li{ display:block; float:left; width:16.66%; } #page-nav ul li a{ display:block; text-align:center; text-decoration:none; color:#FFF; font-size:1.2em; line-height:4em; } #page-nav ul li:nth-child(1) a{ background:#1ABC9C; } #page-nav ul li:nth-child(2) a{ background:#2ECC71; } #page-nav ul li:nth-child(3) a{ background:#F1C40F; } #page-nav ul li:nth-child(4) a{ background:#E67E22; } #page-nav ul li:nth-child(5) a{ background:#E74C3C; } #page-nav ul li:nth-child(6) a{ background:#9B59B6; } #page-nav ul li a:hover{ background:#333; } #page-nav ul li:nth-child(1) a::before{ content:"\e62e"; } #page-nav ul li:nth-child(2) a::before{ content:"\e62a"; } #page-nav ul li:nth-child(3) a::before{ content:"\e631"; } #page-nav ul li:nth-child(4) a::before{ content:"\e644"; } #page-nav ul li:nth-child(5) a::before{ content:"\e62d"; } #page-nav ul li:nth-child(6) a::before{ content:"\e629"; } #page-nav ul li a::before{ font-family: 'icon-font'; margin-left:-1em; margin-right:1em; } #menutoggle{ display:none; } #page-nav-list{ display:block; } @media screen and (min-width: 1200px) { /**/ } @media screen and (min-width: 768px) and (max-width: 979px) { #page-nav ul li a::before{ display:block; margin:0 auto; line-height:1; padding-top:2em; } } @media screen and (max-width: 767px) { #page-nav ul li a::before{ font-size:20px; margin:0; line-height:80px; } #page-nav ul li a{ font-size:0; height:80px; } } @media screen and (max-width: 480px) { #menutoggle{ display:block; width:100%; height:60px; border:none; background:none; text-align:left; text-indent:60px; font-size:1.5em; color:#FFF; position:relative; cursor:pointer; background:#000; } #menutoggle::after{ content:''; width:22px; position:absolute; left:20px; top:10px; box-sizing:border-box; padding:0; box-shadow: 0 10px 0 2px #FFF,0 20px 0 2px #FFF,0 30px 0 2px #FFF; } #menutoggle.active + ul{ display:block; } #page-nav-list{ display:none; position:absolute; width:100%; } #page-nav ul li{ width:100%; } #page-nav ul li a{ text-align:left; font-size:1.2em; text-indent:3.5em; } #page-nav ul li a::before{ position:absolute; left:-2em; } } |
1 2 3 4 5 6 7 8 9 10 | < nav id="page-nav"> < ul id="page-nav-list"> < li >< a href="" id="home">Home</ a ></ li > < li >< a href="" id="photo">Photo</ a ></ li > < li >< a href="" id="user">User</ a ></ li > < li >< a href="" id="document">Document</ a ></ li > < li >< a href="" id="chat">Chat</ a ></ li > < li >< a href="" id="video">Video</ a ></ li > </ ul > </ nav > |
1 2 3 4 5 6 7 8 9 10 11 12 | var nav = document.getElementById('page-nav'); var navlist = document.getElementById('page-nav-list'); nav.insertAdjacentHTML('afterBegin','< button id="menutoggle">Menu</ button >'); var menutoggle = document.getElementById('menutoggle'); menutoggle.onclick = function() { if(window.getComputedStyle(navlist).display === "none"){ menutoggle.className = "active"; }else{ menutoggle.className = ""; } } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)