JS實作響應式的簡單程式碼-js教程-PHP中文網

JS實作響應式的簡單程式碼

PHPz

發布： 2017-04-03 15:33:38

原創

2284 人瀏覽過

一、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#樣式表。

<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" href="" id="rwdlink" />　　<script type="text/javascript">　　　　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";

　　　　　　}

　　　　}

　　</script></head>

登入後複製

以上是JS實作響應式的簡單程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！