有关简单的响应式效果

[daswcszxw]

最近做个项目,要求根据窗口的大小展示出宽窄屏.
我搜了响应式的相关案例.目前国内电商类网站只有天猫做到部分效果,但兼容及响应速度仍存在着问题.还只是PC端.
不过人家的效果完全就可以满足我的需求了.分析了1天他们网站源码.找不到解决方案.
还望各位大佬指点.
问题1:用@media方法如何满足所有浏览器的兼容性.(请提供相关实例链接)
问题2:由于时间紧,又没有解决方案根据自己的能力写了段实现效果的代码.
我知道这个肯定不行的...
<link href="" id="link1" rel="stylesheet"/>//这个.css文件里面放的全是窄屏的样式.也就是分辨率小于等于1100的时候重置这些样式.
<script type="text/javascript">
window.onload=function(){
var link=document.getElementById('link1');
if(screen.width<=1100)
{link.href="index2.css"}
else{
link.href="";
}
}
</script>

[打字员]

http://getbootstrap.com/css/ 這個應該對你有所幫助

[阿鱼]

楼上 +1 大名鼎鼎的bootstrap~ 中文版：http://www.bootcss.com/

[daswcszxw]

引用 6 楼 danica7773 的回复:

http://getbootstrap.com/css/ 這個應該對你有所幫助

引用 7 楼 qwklove 的回复:

楼上 +1 大名鼎鼎的bootstrap~ 中文版：http://www.bootcss.com/

多谢二位!之前也听过Bootstrap.但我要的效果很是简单,没想着用人家的工具包,所以直接分析天猫的实现原理了. 看来是走了弯路了.我会花费些时间研究下它. 同时也希望有经验的同学对我要出的效果做出指点. 另请教.我写的通过screen.width来判断是否重置样式感觉有很大弊端. 因为之前通过screen.width跳转手机站域名就出现BUG,最后改成了navigator.app name/version才修正的问题. 请问下通过screen.width判断为什么会出现BUG?

[打字员]

document.documentElement.clientWidth 這個和screen.width不是一回事，只是有的情況下兩者的值是一樣的而己

[daswcszxw]

要选HTML+CSS版块吗? 求人解答.

[allali]

可以参考jquery.mobile

[daswcszxw]

引用 2 楼 MengYouXuanLv 的回复:

可以参考jquery.mobile

大神请看清问题.这跟jquery mobile有何关系?

[allali]

引用 3 楼 webyellow 的回复:

[quote=引用 2 楼 MengYouXuanLv 的回复:] 可以参考jquery.mobile

大神请看清问题.这跟jquery mobile有何关系?[/quote] http://demos.jquerymobile.com/1.4.0/

[daswcszxw]

引用 4 楼 MengYouXuanLv 的回复:

[quote=引用 3 楼 webyellow 的回复:]
[quote=引用 2 楼 MengYouXuanLv 的回复:]
可以参考jquery.mobile

大神请看清问题.这跟jquery mobile有何关系?[/quote]
http://demos.jquerymobile.com/1.4.0/[/quote]
请问您发这地址什么意思?
jquery mobile可以解决我现在的问题吗?


半年前书我都翻过了.