JS如何根据屏幕大小调用不同CSS样式，分别是320.414.900.1400的屏_框架

不可以在css里用@media (max-width:330px){}么？比如

@media (max-width:320px){}

@media (max-width:414px){}

@media (max-width:900px){}

也可以在link里指定：

非用js的话就是先用js获取网页可见宽度：documentbodyclientWidth （其他宽度及jquery方法可见：>

自己试试吧：

<!doctype html public "-//w3c//dtd html 40 transitional//en">

<html>

<head>

<title> new document </title>

<style>

body{

background-color:red;

}

divsel{

font-size:15px;

color:green;

}

</style>

<!--

windowonload = function(){

var sheet =documentstyleSheets[0];

var rules = sheetcssRules || sheetrules;//

var rule = rules[0];

alert(ruleselectorText)

alert(rulestylecssText)

rule = rules[1];

alert(ruleselectorText)

alert(rulestylecssText)

}

//-->

</SCRIPT>

</head>

<body>

</body>

</html>

获取浏览器可见区高度(滚动条宽度以排除)

documentdocumentElementclientHeight

获取浏览器可见区宽度(滚动条宽度以排除)

documentdocumentElementclientWidth

获取文档高度(建议用浏览器可见区域高度)

documentbodyclientHeight

用screen获得的为屏幕分辨率，只有用户在全屏看网页时网页大小才等于屏幕的分辨率

设置body的背景

documentbodystylebackgroundImage=‘地址’

这种方法是比较精确的控制方法，可以根据获取到的相关大小来控制背景

这种方法的好处就是：如果你的同一个背景有很多不同的分辨率，在页面呈现上会更美观

缺点是：必须根据多种不同大小制作多张背景，且调用哪张不易确定

用绝对定位设置背景的方式的好处是：方便代码的书写

绝对定位缺点是：背景要大而清晰，否则在大尺寸屏幕上会出现背景模糊的情况，且若比例与屏幕比例不同（如4:3和16:9），会变形

以上就是关于JS如何根据屏幕大小调用不同CSS样式，分别是320.414.900.1400的屏全部的内容，包括:JS如何根据屏幕大小调用不同CSS样式，分别是320.414.900.1400的屏、如何用javascript将样式表里的样式追加到body里面、怎么用JS获取到style标签里的内容等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9734041.html

JS如何根据屏幕大小调用不同CSS样式，分别是320.414.900.1400的屏

发表评论

评论列表（0条）