根據不同的顯示器解析度使用不同樣式檔案

admin發表於2018-02-08

現在顯示器的解析度各有不同，如果要追求完美的話，需要根據顯示器不同的解析度呼叫不同的樣式，下面就簡單介紹一下如何實現此功能，先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>螞蟻部落</title> 
<link rel="stylesheet" id="mytest" type="text/css" href="css/css.css"/> 
<script type="text/javascript"> 
window.onload=function(){ 
  var mytest=document.getElementById("mytest"); 
  var thediv=document.getElementById("thediv"); 
  if(screen.width>1024){ 
    mytest.setAttribute("href","css/first.css");
  } 
  else{ 
    mytest.setAttribute("href","css/second.css"); 
  } 
} 
</script> 
</head> 
<body> 
<div id="thediv"></div> 
</body> 
</html>

以上程式碼可以通過screen.width判斷瀏覽器的解析度，然後再通過setAttribute()函式設定<link>元素的href屬性值，這樣就實現了設定不同的樣式效果。

相關文章