Question

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

Answer 1

不可以在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只能执行一次，不能即时刷新渲染页面。除非之前再加一个条件判断屏幕是否变化。

建议还是用前两种方法