View
192
Download
0
Category
Preview:
Citation preview
响应式设计
GL
概念Responsive Web design
弹性 , 流体 布局 (column,flexbox,grid)
响应式 css, 百分比响应式图片一些无法实现的 ( 高度等 )
其他概念• 依据分辨率 (max-width max-device-width)• 手机 ( 浏览器 )( 大部分 ) 为 320x480,pc 大部分为 1440x960• 其他分辨率的变化
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" class="lt-ie10 no-js"> <!endif]--><!--[if gt IE 9]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
chromeframechromeframe
<!--[ if lt IE 8]><!--[ if lt IE 8]><script type=”tex/javascript”><script type=”tex/javascript”>
window.location.href=”ie.xxx.com”;window.location.href=”ie.xxx.com”;</script></script>
<![endif]--><![endif]--> JS
4 vs 5
2 vs 3
框架
•bootstrap•foundation•and so on
其他•编辑器 , sublime emmet, webstorm•调试工具 ,chrome developer tools,
firebug•other: sass, haml, coffee, sasscore,
icheck
资源站•http://learn.shayhowe.com/advanced-ht
ml-css/•http://www.qianduan.net/responsive-we
b-design.html•http://www.w3cplus.com/css3/designing
-css-layout-with-flexbox.html•http://beforweb.com/node/6https://github.com/marvin1023/sassCorehttps://github.com/fronteed/iCheck/
GGGG
Recommended