有关简单的响应式效果

Mafia 2014-01-07 09:21:49
最近做个项目,要求根据窗口的大小展示出宽窄屏.
我搜了响应式的相关案例.目前国内电商类网站只有天猫做到部分效果,但兼容及响应速度仍存在着问题.还只是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>


...全文
164 点赞 收藏 9
写回复
9 条回复
Mafia 2014年01月07日
引用 4 楼 MengYouXuanLv 的回复:
[quote=引用 3 楼 webyellow 的回复:]
[quote=引用 2 楼 MengYouXuanLv 的回复:]
可以参考jquery.mobile

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


半年前书我都翻过了.

回复 点赞
allali 2014年01月07日
引用 3 楼 webyellow 的回复:
[quote=引用 2 楼 MengYouXuanLv 的回复:] 可以参考jquery.mobile
大神请看清问题.这跟jquery mobile有何关系?[/quote] http://demos.jquerymobile.com/1.4.0/
回复 点赞
Mafia 2014年01月07日
引用 2 楼 MengYouXuanLv 的回复:
可以参考jquery.mobile
大神请看清问题.这跟jquery mobile有何关系?
回复 点赞
allali 2014年01月07日
可以参考jquery.mobile
回复 点赞
Mafia 2014年01月07日
要选HTML+CSS版块吗? 求人解答.
回复 点赞
打字员 2014年01月07日
document.documentElement.clientWidth 這個和screen.width不是一回事,只是有的情況下兩者的值是一樣的而己
回复 点赞
Mafia 2014年01月07日
引用 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?
回复 点赞
阿鱼 2014年01月07日
楼上 +1 大名鼎鼎的bootstrap~ 中文版:http://www.bootcss.com/
回复 点赞
打字员 2014年01月07日
http://getbootstrap.com/css/ 這個應該對你有所幫助
回复 点赞
发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告