方法一：在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的话 就是先用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代码：
此处为屏幕宽度为414与900之间的展示样式
这样就可以根据不同的屏幕大小给对应的div添加不同的样式了。
但是用js有一个缺点就是如果你在1400屏幕添加对应的class之后，如果你此时缩小窗口，样式依然还是1400的，除非重新刷新页面。因为js只能执行一次，不能即时刷新渲染页面。除非之前再加一个条件判断屏幕是否变化。
但是用js有一个缺点就是如果你在1400屏幕添加对应的class之后，如果你此时缩小窗口，样式依然还是1400的，除非重新刷新页面。因为js只能执行一次，不能即时刷新渲染页面。除非之前再加一个条件判断屏幕是否变化。
建议还是用前两种方法
未经允许不得转载：前端撸码笔记 » 如何根据屏幕宽度加载不同的样式