JS判斷不同分辨率調(diào)用不同的CSS樣式文件實(shí)現(xiàn)思路及測(cè)試代碼
更新時(shí)間：2013年01月23日 16:22:13 作者：
最近看一個(gè)網(wǎng)站，發(fā)現(xiàn)顯示器不同的分辨率，樣式文件調(diào)用的也不一樣，于是很好奇研究并寫了一個(gè),經(jīng)測(cè)試感覺(jué)還不錯(cuò)，感興趣的你可以來(lái)看看哦
最近看一個(gè)網(wǎng)站，發(fā)現(xiàn)顯示器不同的分辨率，樣式文件調(diào)用的也不一樣，今天寫了一個(gè)例子研究一下，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<link rel="stylesheet" id="sc" type="text/css" href="css/c1.css"/>
<script type="text/javascript">
window.onload=function(){
var sc=document.getElementById("sc");
var d=document.getElementById("d");
if(screen.width>1024) //獲取屏幕的的寬度
{
sc.setAttribute("href","css/c2.css"); //設(shè)置css引入樣式表的路徑
d.innerHTML = "你的電腦屏幕寬度大于1024，我的寬度是 1200px, 背景色現(xiàn)在是紅色。";
}
else{
sc.setAttribute("href","css/c1.css");
d.innerHTML = "你的電腦屏幕寬度小于或是等于1024，我的寬度是 960px, 背景色現(xiàn)在是藍(lán)色。";
}
}
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>
c1.css里面的內(nèi)容
*{ margin:0; padding:0;}
div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}
c2.css里面的內(nèi)容
*{ margin:0; padding:0;}
div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<link rel="stylesheet" id="sc" type="text/css" href="css/c1.css"/>
<script type="text/javascript">
window.onload=function(){
var sc=document.getElementById("sc");
var d=document.getElementById("d");
if(screen.width>1024) //獲取屏幕的的寬度
{
sc.setAttribute("href","css/c2.css"); //設(shè)置css引入樣式表的路徑
d.innerHTML = "你的電腦屏幕寬度大于1024，我的寬度是 1200px, 背景色現(xiàn)在是紅色。";
}
else{
sc.setAttribute("href","css/c1.css");
d.innerHTML = "你的電腦屏幕寬度小于或是等于1024，我的寬度是 960px, 背景色現(xiàn)在是藍(lán)色。";
}
}
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>
c1.css里面的內(nèi)容
復(fù)制代碼 代碼如下:
*{ margin:0; padding:0;}
div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}
c2.css里面的內(nèi)容
復(fù)制代碼 代碼如下:
*{ margin:0; padding:0;}
div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}
相關(guān)文章
FLASH 廣告外部鏈接實(shí)現(xiàn)代碼2008-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片切換代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
js實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JS實(shí)現(xiàn)的獲取銀行卡號(hào)歸屬地及銀行卡類型操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)的獲取銀行卡號(hào)歸屬地及銀行卡類型操作,結(jié)合實(shí)例形式分析了javascript不依賴第三方接口計(jì)算銀行卡歸屬地相關(guān)信息操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)簡(jiǎn)單吸頂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了ActiveX控件如何與Javascript進(jìn)行交互,需要的朋友可以參考下2014-06-06
JavaScript變量or循環(huán)中的var和let詳解
這篇文章主要介紹了JavaScript變量or循環(huán)中的var和let詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-09-09
再談javascript圖片預(yù)加載技術(shù)(詳細(xì)演示)
由于javascript無(wú)法獲取img文件頭數(shù)據(jù)，必須等待其加載完畢后才能獲取真實(shí)的大小，所以lightbox類效果為了讓圖片居中顯示，導(dǎo)致其速度體驗(yàn)要比直接輸出的差很多。2011-03-03
JavaScript數(shù)組函數(shù)unshift、shift、pop、push使用實(shí)例
這篇文章主要介紹了JavaScript數(shù)組函數(shù)unshift、shift、pop、push使用實(shí)例,本文先是講解了聲明數(shù)組的方法,然后對(duì)4個(gè)函數(shù)使用給出了一些例子,需要的朋友可以參考下2014-08-08
下面小編就為大家?guī)?lái)一篇使用SVG基本操作API的實(shí)例講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09