HTML5響應式設計
響應式設計的設計原理是經過CSS3的Media Queries來調整頁面元素在不一樣屏幕分辨率下的顯示。javascript
在大多數的響應式設計頁面中，都會使用以下的meta標記。css
<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判斷設備方向的特性html
@media screen and (max-width: 980px) { /*屏幕寬度小於內容主題時的樣式*/}
@media screen and (orientation: portrait) {/*縱屏時的樣式*/}
經過JavaScript偵聽窗口改變事件resizejava
$(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() )
}
};
響應式設計案列：jquery
1，響應式設計列表git
*{
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，響應式內容圖片web
*{
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%;
}
}
<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，響應式背景windows
訪問響應式的頁面都加載相同的圖片，這致使了一種尷尬的狀況，圖片過大，則移動端流量難以承受，圖片太小，則桌面端效果就大打折扣。api
使用js動態檢測頁面尺寸的變化，繼而有針對性的匹配加載響應的圖片app
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，響應式輪播圖
*{
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%;
}
}
<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，響應式菜單
@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;
}
}
<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>
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 = "";
}
}
相關文章
- 1. 前端設計 響應式設計_響應式響應設計
- 2. html5 + css3 + jQuery + 響應式佈局設計
- 3. HTML5+CSS3響應式設計（二）
- 4. 響應式設計
- 5. 響應式Web設計（二）：響應式Web設計的概念
- 6. 響應式Web設計（一）：響應式Web設計的背景
- 7. 響應式Web設計（三）：響應式Web設計的方法
- 8. 響應式Web設計（四）：響應式Web設計的優化
- 9. HTML5----響應式（自適應）網頁設計
- 10. Css3響應式設計
- 更多相關文章...
- • Web 創建設計 - 網站建設指南
- • 如何僞造ARP響應？ - TCP/IP教程
- • IntelliJ IDEA代碼格式化設置
- • 使用Rxjava計算圓周率
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
