Responsive设计

Responsive设计的基本概念

Transcript

1. Responsive Responsive Responsive Responsive 设计 作者: 大漠 QQ: 81059347 Blog: http://www.w3cplus.com 新浪微薄：http://weibo.com/w3cplus
2. Responsive Responsive Responsive Responsive 设计 Responsive是什么？
3. Responsive Responsive Responsive Responsive 设计 Responsive是流体布局 Responsive是网格布局 Responsive是手机布局
4. Responsive Responsive Responsive Responsive 设计 Responsive是流体布局 Responsive是网格布局 Responsive是手机布局
5. Responsive Responsive Responsive Responsive 设计 Responsive是 灵活的布局 适合各种设备的布局
6. 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
7. 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/
8. 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
9. Responsive Responsive Responsive Responsive 设计 如何做？
10. Responsive Responsive Responsive Responsive 设计 简单的布局
11. Responsive Responsive Responsive Responsive 设计 CSS3 Media Queries http://www.w3cplus.com/content/css3-media-queries
12. 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)
13. 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)
14. 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)
15. 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)
16. 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)
17. 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)
18. 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
19. Responsive Responsive Responsive Responsive 设计 @media screen and (max-width : 640px) { /* CSS Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices 640px显屏
20. Responsive Responsive Responsive Responsive 设计 @media screen and (max-width : 800px) { /* CSS Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices 800px显屏
21. Responsive Responsive Responsive Responsive 设计 @media screen and (max-width : 1024px) { /* CSS Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices 1024显屏
22. 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
23. 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
24. Responsive Responsive Responsive Responsive 设计
25. Responsive Responsive Responsive Responsive 设计
26. Responsive Responsive Responsive Responsive 设计 Min-* && Max-*
27. Responsive Responsive Responsive Responsive 设计 断点的选择
28. Responsive Responsive Responsive Responsive 设计
29. Responsive Responsive Responsive Responsive 设计
30. Responsive Responsive Responsive Responsive 设计 流体布局
31. Responsive Responsive Responsive Responsive 设计 我们怎么布局？
32. Responsive Responsive Responsive Responsive 设计 给一个 流体容器
33. Responsive Responsive Responsive Responsive 设计 添加反方向 浮动
34. Responsive Responsive Responsive Responsive 设计 三列布局 2 2 2 2列嵌套法
35. Responsive Responsive Responsive Responsive 设计 相对值
36. Responsive Responsive Responsive Responsive 设计 确定嵌套宽度 你想要的 宽度 父元素的 宽度 = 嵌套列的 宽度
37. Responsive Responsive Responsive Responsive 设计 计算嵌套宽度 你想要的 宽度 父元素的 宽度 = 嵌套列的 宽度 目标 内容 = 结果
38. Responsive Responsive Responsive Responsive 设计 计算嵌套宽度 你想要的 宽度 父元素的 宽度 = 嵌套列的 宽度 目标 内容 = 结果 20 80 = 0.25 25%
39. Responsive Responsive Responsive Responsive 设计 是你想要的？
40. Responsive Responsive Responsive Responsive 设计 间距是？
41. 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; }
42. Responsive Responsive Responsive Responsive 设计 图片怎么自适应？ img { max-width: 100%; }
43. Responsive Responsive Responsive Responsive 设计 图片怎么自适应？ <img src="image.jpg" data-src-600px="image-600px.jpg" data-src- 800px="image-800px.jpg" alt=""> @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); } }
44. Responsive Responsive Responsive Responsive 设计 移动端上的效果
45. Responsive Responsive Responsive Responsive 设计 Viewport
46. Responsive Responsive Responsive Responsive 设计 Viewport < meta name="viewport" content="width=device-width">
47. Responsive Responsive Responsive Responsive 设计 Q && A
48. 网名：大漠，W3cplus创始人，现居上海，从事 Web前端和手游工作，对HTML5、CSS3、移动端、 前端框架抱有浓厚兴趣。现正在编写《 css3精解： CSS3核心技术与Bootstrap使用详解》一书。 Blog: http://www.w3cplus.com QQ: 81059347 QQ交流群： 1041263 新浪微薄: http://weibo.com/w3cplus E-mail: w3cplus@hotmail.com