JS實作響應式的簡單程式碼
- PHPz原創
- 2017-04-03 15:33:382280瀏覽
一、CSS實作響應式
CSS響應式的實作主要依賴CSS媒體查詢：
媒體查詢包含一個可選的媒體類型和零或多個表達式來限制使用媒體特性的樣式表範圍,例如：width，height，color。 CSS3中的Media queries讓內容的呈現可以只針對特定範圍的輸出裝置而不必改變內容本身。即透過媒體查詢判斷螢幕寬度，載入不同的CSS樣式表
#程式碼如下：注意一定要有一個預設樣式表不加媒體查詢，否則在IE8中存取時會沒有樣式表。
<head> <meta charset="UTF-8"> <title>响应式的演示</title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/index1200.css" /> <link rel="stylesheet" type="text/css" href="css/index980.css" media="screen and (min-width:980px) and (max-width:1200px)"/> <link rel="stylesheet" type="text/css" href="css/index640.css" media="screen and (min-width:640px) and (max-width:980px)"/> <link rel="stylesheet" type="text/css" href="css/index320.css" media="screen and (max-width:640px)"/> </head
二、JS實作回應式
#JS響應式的實作也是依托於外聯不同的CSS樣式表，透過取得不同裝置的螢幕寬度，選擇性地載入不同的CSS#樣式表。
93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7响应式的演示6e916e0f7d1e588d4f442bf645aedb2f 36cd3b2ddc05fe575a9951c3bb566f83 0138a88b79d3bacb8491d5e7d7e27258 4c41bd30c55f798d965853cf38c818f4 8019067d09615e43c7904885b5246f0a var rwdlink = document.getElementById("rwdlink");
setCSS();
window.onresize = setCSS;
function setCSS(){
var windowWidth = document.documentElement.clientWidth;
if(windowWidth >= 1200){
rwdlink.href = "";
}else if(windowWidth >= 980){
rwdlink.href = "css/index980.css";
}else if(windowWidth >= 640){
rwdlink.href = "css/index640.css";
}else{
rwdlink.href = "css/index320.css";
}
}
2cacc6d41bbb37262a98f745aa00fbf09c3bca370b5104690d9ef395f2c5f8d1
#
以上是JS實作響應式的簡單程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn