有关简单的响应式效果

daswcszxw 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>


...全文
232 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
daswcszxw 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/
daswcszxw 2014-01-07
  • 打赏
  • 举报
回复
引用 2 楼 MengYouXuanLv 的回复:
可以参考jquery.mobile
大神请看清问题.这跟jquery mobile有何关系?
allali 2014-01-07
  • 打赏
  • 举报
回复
可以参考jquery.mobile
daswcszxw 2014-01-07
  • 打赏
  • 举报
回复
要选HTML+CSS版块吗? 求人解答.
打字员 2014-01-07
  • 打赏
  • 举报
回复
document.documentElement.clientWidth 這個和screen.width不是一回事,只是有的情況下兩者的值是一樣的而己
daswcszxw 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/ 這個應該對你有所幫助

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧