14
响响响响响

Reponsive show

  • Upload
    -

  • View
    192

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Reponsive show

响应式设计

Page 2: Reponsive show

GL

Page 3: Reponsive show

概念Responsive Web design

弹性 , 流体 布局 (column,flexbox,grid)

响应式 css, 百分比响应式图片一些无法实现的 ( 高度等 )

Page 4: Reponsive show

其他概念• 依据分辨率 (max-width max-device-width)• 手机 ( 浏览器 )( 大部分 ) 为 320x480,pc 大部分为 1440x960• 其他分辨率的变化

Page 5: Reponsive show

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

Page 6: Reponsive show

常用伎俩• @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” />

Page 7: Reponsive show

常用伎俩•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

Page 8: Reponsive show

兼容 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

Page 9: Reponsive show

4 vs 5

Page 10: Reponsive show

2 vs 3

Page 11: Reponsive show

框架

•bootstrap•foundation•and so on

Page 12: Reponsive show

其他•编辑器 , sublime emmet, webstorm•调试工具 ,chrome developer tools,

firebug•other: sass, haml, coffee, sasscore,

icheck

Page 13: Reponsive show

资源站•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/

Page 14: Reponsive show

GGGG