簡單的來說它是一種語法,用來協助快速的改變套用整個網站版形外觀風格的一種方法! 在此格主先不多做介紹!往後在陸續PO上詳細的介紹!

網頁設計中往往會遇到這樣一個問題,不同使用者使用不同瀏覽器以及不同的解析度瀏覽網頁時


,使用者所看到的畫面與設計者的初衷有很大的出入,這是網頁設計師需要考慮的一個問題。

現在可透過javascript來達成根據瀏覽器和螢幕解析度調用不同的CSS代碼,代碼如下:


  1. <script type="text/javascript">   
  2. <!--   
  3. if (window.navigator.userAgent.indexOf("MSIE")>=1)   
  4. {   
  5. var IE1024="";   
  6. var IE800="";   
  7. var IE1152="";   
  8. var IEother="";   
  9.   
  10.   
  11. ScreenWidth(IE1024,IE800,IE1152,IEother)   
  12. }else{   
  13. if (window.navigator.userAgent.indexOf("Firefox")>=1)   
  14. {   
  15. file://若瀏覽器為Firefox   
  16. var Firefox1024="";   
  17. var Firefox800="";   
  18. var Firefox1152="";   
  19. var Firefoxother="";   
  20.   
  21. ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)   
  22. }else{   
  23. file://若瀏覽器為其他類型   
  24. var Other1024="";   
  25. var Other800="";   
  26. var Other1152="";   
  27. var Otherother="";   
  28. ScreenWidth(Other1024,Other800,Other1152,Otherother)   
  29. }   
  30. }   
  31.   
  32. function ScreenWidth(CSS1,CSS2,CSS3,CSS4){   
  33. if ((screen.width == 1024) && (screen.height == 768)){   
  34. setActiveStyleSheet(CSS1);   
  35. }else{   
  36. if ((screen.width == 800) && (screen.height == 600)){   
  37. setActiveStyleSheet(CSS2);   
  38. }else{   
  39. if ((screen.width == 1152) && (screen.height == 864)){   
  40. setActiveStyleSheet(CSS3);   
  41. }else{   
  42. setActiveStyleSheet(CSS4);   
  43. }}}   
  44. }   
  45.   
  46. function setActiveStyleSheet(title){   
  47. document.getElementsByTagName("link")[0].href="style/"+title;   
  48. }   
  49. file://-->   
  50. </script>   

解釋:
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";

引號內分別填入,使用者使用IE且解析度為1024*768,800*600,1152*864所要使用的css檔案名稱。

var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";

引號內分別填入,使用者使用FireFox且解析度為1024*768,800*600,1152*864所要使用的css檔案名稱。

var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";

引號內分別填入,使用者使用其他類型且解析度為1024*768,800*600,1152*864所要使用的css檔案名稱。

不判斷解析度,僅判斷瀏覽器,達成依據瀏覽器類型自動調用不同CSS。

代碼如下:


  1. <script type="text/javascript">   
  2. <!--   
  3. if (window.navigator.userAgent.indexOf("MSIE")>=1)   
  4. {   
  5. file://若瀏覽器為IE   
  6. setActiveStyleSheet("default.css");   
  7. }else{   
  8. if (window.navigator.userAgent.indexOf("Firefox")>=1)   
  9. {   
  10. file://若瀏覽器為Firefox   
  11. setActiveStyleSheet("default2.css");   
  12. }else{   
  13. file://若瀏覽器為其他類型   
  14. setActiveStyleSheet("macrolong.css");   
  15. }   
  16. }   
  17.   
  18. function setActiveStyleSheet(title){   
  19. document.getElementsByTagName("link")[0].href="style/"+title;   
  20. }   
  21. file://-->   
  22. </script>   

解釋:

若瀏覽器為IE,則調用default.css

若瀏覽器為Firefox,則調用default2.css

若瀏覽器為其他類型,則調用macrolong.css

使用方法:將上述代碼放入</head>前面即可

狼翔月影 發表在 痞客邦 PIXNET 留言(0) 人氣()