1 / 48

Responsive 设计

Responsive 设计. 作者 : 大漠 QQ: 81059347 Blog: http://www.w3cplus.com 新浪微薄： http://weibo.com/w3cplus. Responsive 设计. Responsive是什么？. Responsive 设计. Responsive是 流体布局 Responsive是 网格布局 Responsive是 手机布局. Responsive 设计. Responsive是 流体布局 Responsive是 网格布局 Responsive是 手机布局. Responsive 设计.

larissa-ayers
Download Presentation

Responsive 设计

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Responsive 设计 Responsive是什么？

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

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

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

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

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

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

  9. Responsive 设计 如何做？

  10. Responsive 设计 简单的布局

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

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

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

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

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

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

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

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

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

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

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

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

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

  24. Responsive 设计

  25. Responsive 设计

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

  27. Responsive 设计 断点的选择

  28. Responsive 设计

  29. Responsive 设计

  30. Responsive 设计 流体布局

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

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

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

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

  35. Responsive 设计 相对值

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

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

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

  39. Responsive 设计 是你想要的？

  40. Responsive 设计 间距是？

  41. 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 设计 图片怎么自适应？ img { max-width: 100%; }

  43. 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 设计 移动端上的效果

  45. Responsive 设计 Viewport

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

  47. 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

More Related