响应式设计,响应式布局,自适应网页

之前发布过一篇<自适应网页设计,网页自适应性测试工具集>,感兴趣可以查看。今天记录一下响应式设计,响应式布局,自适应网页一些知识

概念
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

<!–[if IE 9]> <html lang=”en”> <!endif]–>

<!–[if gt IE 9]><!–> <html lang=”en”> <!–<![endif]–>

<!–[ if lt IE 8]><script type=”tex/javascript”>window.location.href=”ie.xxx.com”;</script><![endif]–>

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/

发表评论