happy175 发表于 2013-9-30 12:58:28

响应式设计,响应式布局,自适应网页常用代码

之前发布过一篇<自适应网页设计,网页自适应性测试工具集>,感兴趣可以查看。今天记录一下响应式设计,响应式布局,自适应网页一些知识
概念
Responsive Web design
弹性,流体 布局(column,flexbox,grid)
响应式css,百分比
响应式图片
一些无法实现的(高度等)
•依据分辨率(max-width max-device-width)
•手机(浏览器)(大部分)为320×480,pc大部分为1440×960
其他分辨率的变化
How to do it
•媒体查询
•<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no”>
•要点
•meta name viewport
•initial-scale=1
•user-scalable=no

常用伎俩
•@media screen and ( min-width:960px){}
•@media screen and ( min-width:700px){}
•@media screen and ( min-width:480px){}
•@media screen and ( min-width:320px){}
•@media screen and ( min-device-width: 960px){}
•@media screen and (max-width:480px) and (orientation:portrait){}
•<link rel=”stylesheet” type=”text/css” href=”site.css” media=”screen” max-width=”480” />

•max-width min-width
•max-height min-height
•position absolute relative fixed
•display none block table list-item inline inline-block
•visibility hidden visible collapse



兼容ie
<!–> <html lang=”en”> <!endif]–>
<!–><!–> <html lang=”en”> <!–<!–>
<!–[ if lt IE 8]><script type=”tex/javascript”>window.location.href=”ie.xxx.com”;</script><!–>
chromeframe
框架:
•bootstrap
•foundation
•and so on
•编辑器, sublime emmet, webstorm
•调试工具,chrome developer tools, firebug
•other: sass, haml, coffee, sasscore, icheck

•http://learn.shayhowe.com/advanced-html-css/
•http://www.qianduan.net/responsive-web-design.html
•http://www.w3cplus.com/css3/designing-css-layout-with-flexbox.html
•http://beforweb.com/node/6
https://github.com/marvin1023/sassCore
https://github.com/fronteed/iCheck/




happy175 发表于 2014-5-9 10:18:38

值得学习
页: [1]
查看完整版本: 响应式设计,响应式布局,自适应网页常用代码