標籤：styles evel javascrip eve 實現 height span ie8 ack
一、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和CSS實現響應式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
