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

发布网友发布时间：2022-05-13 00:39

共2个回答

懂视网时间：2022-05-13 05:00

我有a.css b.css二个CSS文件

如何使用JS语句来控制根据不同条件导入到页面中使用呢？

回复讨论(解决方案)

if(xxx){ document.write("");}else{ document.write("");}

热心网友时间：2022-05-13 02:08

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

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

也可以在link里指定：
<link rel="stylesheet" type="text/css" media="screen and (max-width: 900px)" href="style.css">

<link rel="stylesheet" type="text/css" media="screen and (min-width: 414px)" href="style.css" >

非用js的话就是先用js获取网页可见宽度：document.body.clientWidth （其他宽度及jquery方法可见：http://web.zhaicool.net/85.html ）
比如：
if(document.body.clientWidth<900&&document.body.clientWidt>414)
{
document.getElementById("ID").className="class1";

}
html代码：<div id="ID">此处为屏幕宽度为414与900之间的展示样式<div>
这样就可以根据不同的屏幕大小给对应的div添加不同的样式了。
但是用js有一个缺点就是如果你在1400屏幕添加对应的class之后，如果你此时缩小窗口，样式依然还是1400的，除非重新刷新页面。因为js只能执行一次，不能即时刷新渲染页面。除非之前再加一个条件判断屏幕是否变化。

建议还是用前两种方法