Responsive Responsive Responsive Responsive 设计 作者: 大漠 QQ: 81059347 Blog: http://www.w3cplus.com 新浪微薄：http://weibo.com/w3cplus 

Responsive Responsive Responsive Responsive 设计 Responsive是什么？ 

Responsive Responsive Responsive Responsive 设计 Responsive是流体布局 Responsive是网格布局 Responsive是手机布局 

Responsive Responsive Responsive Responsive 设计 Responsive是流体布局 Responsive是网格布局 Responsive是手机布局 

Responsive Responsive Responsive Responsive 设计 Responsive是 灵活的布局 适合各种设备的布局 

Responsive Responsive Responsive Responsive 设计 http://www.w3cplus.com/css3/media-queries-alistpart http://www.w3cplus.com/css3/media-queries-alistpart http://www.w3cplus.com/css3/media-queries-alistpart http://www.w3cplus.com/css3/media-queries-alistpart http://www.alistapart.com/d/responsive-web- http://www.alistapart.com/d/responsive-web- http://www.alistapart.com/d/responsive-web- http://www.alistapart.com/d/responsive-web- design/ex/ex-site-FINAL.html design/ex/ex-site-FINAL.html design/ex/ex-site-FINAL.html design/ex/ex-site-FINAL.html 

Responsive Responsive Responsive Responsive 设计 http://www.w3cplus.com/css3/media-queries- http://www.w3cplus.com/css3/media-queries- http://www.w3cplus.com/css3/media-queries- http://www.w3cplus.com/css3/media-queries- hicksdesign hicksdesign hicksdesign hicksdesign http://hicksdesign.co.uk/ http://hicksdesign.co.uk/ http://hicksdesign.co.uk/ http://hicksdesign.co.uk/ 

Responsive Responsive Responsive Responsive 设计 http://www.w3cplus.com/css3/media-queries-tee- http://www.w3cplus.com/css3/media-queries-tee- http://www.w3cplus.com/css3/media-queries-tee- http://www.w3cplus.com/css3/media-queries-tee- gallery gallery gallery gallery http://teegallery.com http://teegallery.com http://teegallery.com http://teegallery.com 

Responsive Responsive Responsive Responsive 设计 如何做？ 

Responsive Responsive Responsive Responsive 设计 简单的布局 

Responsive Responsive Responsive Responsive 设计 CSS3 Media Queries http://www.w3cplus.com/content/css3-media-queries 

Responsive Responsive Responsive Responsive 设计 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices Smartphones (portrait and landscape) 

Responsive Responsive Responsive Responsive 设计 @media only screen and (min-width : 321px) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices Smartphones (landscape) 

Responsive Responsive Responsive Responsive 设计 @media only screen and (max-width : 320px) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices Smartphones (portrait) 

Responsive Responsive Responsive Responsive 设计 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices iPads (portrait and landscape) 

Responsive Responsive Responsive Responsive 设计 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices iPads (landscape) 

Responsive Responsive Responsive Responsive 设计 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices iPads (portrait) 

Responsive Responsive Responsive Responsive 设计 @media only screen and (-webkit-min-device- pixel-ratio : 1.5),only screen and (min-device- pixel-ratio : 1.5) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices iPhone 4 

Responsive Responsive Responsive Responsive 设计 @media screen and (max-width : 640px) { /* CSS Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices 640px显屏 

Responsive Responsive Responsive Responsive 设计 @media screen and (max-width : 800px) { /* CSS Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices 800px显屏 

Responsive Responsive Responsive Responsive 设计 @media screen and (max-width : 1024px) { /* CSS Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices 1024显屏 

Responsive Responsive Responsive Responsive 设计 @media only screen and (min-width : 1224px) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices Desktops and laptops 

Responsive Responsive Responsive Responsive 设计 @media only screen and (min-width : 1824px) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices Large screens 

Responsive Responsive Responsive Responsive 设计 

Responsive Responsive Responsive Responsive 设计 

Responsive Responsive Responsive Responsive 设计 Min-* && Max-* 

Responsive Responsive Responsive Responsive 设计 断点的选择 

Responsive Responsive Responsive Responsive 设计 

Responsive Responsive Responsive Responsive 设计 

Responsive Responsive Responsive Responsive 设计 流体布局 

Responsive Responsive Responsive Responsive 设计 我们怎么布局？ 

Responsive Responsive Responsive Responsive 设计 给一个 流体容器 

Responsive Responsive Responsive Responsive 设计 添加反方向 浮动 

Responsive Responsive Responsive Responsive 设计 三列布局 2 2 2 2列嵌套法 

Responsive Responsive Responsive Responsive 设计 相对值 

Responsive Responsive Responsive Responsive 设计 确定嵌套宽度 你想要的 宽度 父元素的 宽度 = 嵌套列的 宽度 

Responsive Responsive Responsive Responsive 设计 计算嵌套宽度 你想要的 宽度 父元素的 宽度 = 嵌套列的 宽度 目标 内容 = 结果 

Responsive Responsive Responsive Responsive 设计 计算嵌套宽度 你想要的 宽度 父元素的 宽度 = 嵌套列的 宽度 目标 内容 = 结果 20 80 = 0.25 25% 

Responsive Responsive Responsive Responsive 设计 是你想要的？ 

Responsive Responsive Responsive Responsive 设计 间距是？ 

Responsive Responsive Responsive Responsive 设计 容器撑破了怎么办？ *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } 

Responsive Responsive Responsive Responsive 设计 图片怎么自适应？ img { max-width: 100%; } 

Responsive Responsive Responsive Responsive 设计 图片怎么自适应？ @media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } @media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); } } 

Responsive Responsive Responsive Responsive 设计 移动端上的效果 

Responsive Responsive Responsive Responsive 设计 Viewport 

Responsive Responsive Responsive Responsive 设计 Viewport < meta name="viewport" content="width=device-width"> 

Responsive Responsive Responsive Responsive 设计 Q && A 

网名：大漠，W3cplus创始人，现居上海，从事 Web前端和手游工作，对HTML5、CSS3、移动端、 前端框架抱有浓厚兴趣。现正在编写《 css3精解： CSS3核心技术与Bootstrap使用详解》一书。 Blog: http://www.w3cplus.com QQ: 81059347 QQ交流群： 1041263 新浪微薄: http://weibo.com/w3cplus E-mail: [email protected]