根據javascript的分辨率更改css文件

我在網站上發現它，但對我來說似乎不起作用。問題是，CSS不會改變或改變非常快，我可以看到所有的黑色閃光和空白頁面（http://gino.net16.net/inde.php它可以清楚地看到與Firefox）。因爲我有沒有JavaScript技能，所以我不知道什麼是錯的。根據javascript的分辨率更改css文件

主文件

<html> 
<head> 
     <title>my title</title> 
<SCRIPT LANGUAGE="JavaScript"> 


<!-- Begin 
function redirectCSS() { 

if ((screen.width == 640) && (screen.height == 480)) 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 

else if ((screen.width == 800) && (screen.height == 600)) 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 

else if ((screen.width == 1024) && (screen.height == 768)) 
     { document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 

else 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 
} 
// End --> 
</script>  

</head> 
<body onLoad="redirectCSS()"> 

<h1>Use the appropriate stylesheet to display this content</h1> 

</body> 
</div> 
</html>

css樣式文件

@charset "utf-8"; 
/* CSS Document */ 

body { 
    background-color: #2a2725; 
    font-family: Arial, Helvetica, sans-serif; 
    text-shadow: 0px 0px 1px #2a2725; 
    color: #fff; 
} 
/* }}} END TableSorter */

來源

2011-01-29 Decker

它似乎工作在jsfiddle：http://www.jsfiddle.net/vLy3p/。 – Eray 2011-01-29 20:56:15

谷歌爲「CSS媒體查詢」 - 有更簡單的方法來做到這一點！ – Pointy 2011-01-29 21:00:48

頁面加載後，你可能永遠不會做一個文件撰寫。你需要調用函數內聯這樣的（和它幫助，如果你有不同的CSS文件太）

<html> 
<head> 
     <title>my title</title> 
<SCRIPT LANGUAGE="JavaScript"> 


<!-- Begin 
function redirectCSS() { 

if ((screen.width == 640) && (screen.height == 480)) 
     {document.write("<link href='small.css' rel='stylesheet' type='text/css'>")} 

else if ((screen.width == 800) && (screen.height == 600)) 
     {document.write("<link href='medium.css' rel='stylesheet' type='text/css'>")} 

else if ((screen.width == 1024) && (screen.height == 768)) 
     { document.write("<link href='large.css' rel='stylesheet' type='text/css'>")} 

else 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 
} 
redirectCSS() 
// End --> 
</script>  

</head> 
<body > 

<h1>Use the appropriate stylesheet to display this content</h1> 

</body> 
</div> 
</html>

我會親自做，如果我不得不這樣做：

<html> 
<head> 
     <title>my title</title> 
<link href='style.css' rel='stylesheet' type='text/css' /> 
<script type="text/javascript"><!-- Begin 
var css = ""; 
if (screen.width < 800) css='small.css'; 
else if (screen.width < 1024) css='medium.css'; 
else css='large.css'; 
document.write("<link href='"+css+"' rel='stylesheet' type='text/css' />"); 
// End --> 
</script>  

</head> 
<body > 

<h1>Use the appropriate stylesheet to display this content</h1> 

</body> 
</div> 
</html>

來源

2011-01-29 21:06:59 mplungjan

你是覆蓋頁面的內容。在onload之後document.write覆蓋整個頁面。而不是將其放入函數中，您需要在加載頁面時在頁眉中執行JavaScript。

<script type="text/javascript"> 
if ((screen.width == 640) && (screen.height == 480)) 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 

else if ((screen.width == 800) && (screen.height == 600)) 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 

else if ((screen.width == 1024) && (screen.height == 768)) 
     { document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 

else 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 
} 
</script>

一些更多的言論：

1）記得incude「一般」的樣式表，而不使用JavaScript，爲不願或不能支持JavaScript誰的用戶和瀏覽器。

2）language="JavaScript"已過期。改爲使用type="text/javascript"。

3）這是沒有必要「註釋掉」 JavaScript的

4）請記住，屏幕大小無關，與視口（瀏覽器窗口）的大小。沒有人能最大化他們的瀏覽器窗口。

5）最重要的是：沒有真正的理由再使用JavaScript了。除非你真的，真的，真的需要支持IE，那麼你可以使用CSS3 Media Queries。看到這個問題的一個例子：Fluid layouts with CSS

來源

2011-01-29 21:08:40 RoToRa

嘗試使用CSS Media Queries，他們做的正是你想要的:)

來源

2011-01-29 22:57:39 levu

不知道，它工作得很好，在某些情況下，你總是會與你的佈局有問題。對CSS標準的聲明：當你調整它

link rel="stylesheet" type="text/css" href="css/style.css" 

link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css" 

link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" 
     href="css/medium.css" 

link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css"

瀏覽器甚至會改變看法。

來源

2012-08-09 14:51:54

根據javascript的分辨率更改css文件

回答

相關問題