1. 什么是 viewport 2. 他的由来,有什么作用">
Responsive
This presentation is the property of its rightful owner.
Sponsored Links
1 / 13

Responsive 之 小试牛刀 PowerPoint PPT Presentation


  • 72 Views
  • Uploaded on
  • Presentation posted in: General

Responsive 之 小试牛刀. 作者: different ( D 姐),前端工程师 博客: http://www.w3cplus.com 新浪微博 : inline_block. 提纲. Viewport 浅谈 Fluid img 处理 响应式布局 响应式布局面临的几个问题. 1、 viewport. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 1. 什么是 viewport 2. 他的由来,有什么作用

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Responsive

Responsive之小试牛刀

作者:different(D姐),前端工程师

博客:http://www.w3cplus.com

新浪微博:inline_block


Responsive

提纲

  • Viewport浅谈

  • Fluid img处理

  • 响应式布局

  • 响应式布局面临的几个问题


Responsive

1、viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1.什么是viewport

2.他的由来,有什么作用

3.桌面浏览器的viewport跟移动viewport的区别

4.扩展知识


Responsive

1.4 扩展知识

1.css像素与设备物理像素的区别

http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html

2.viewport相关内容链接,详见

http://www.w3cplus.com/css/advanced-html-css-lesson4-responsive-web-design.html#viewport

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

https://developer.mozilla.org/enUS/docs/Mobile/Viewport_meta_tag


Responsive

2、Fluid img处理

1.通常处理img{max-width:100%;}

2.需要注意的地方

3.IE6兼容

参考:http://alistapart.com/article/fluid-images

http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design

http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries-pt2.html


Responsive

2.3、IE6兼容

  • AlphaImageLoader使得ie6透明的微软css过滤

  • .logo {

    • background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader» (src="/path/to/logo.png", sizingMethod="scale");

  • }


Responsive

3、响应式布局

1.设计布局

2.结构布局——grid


Responsive

3.1、响应式设计布局

参考:http://www.lukew.com/ff/entry.asp?1514

http://speckyboy.com/2012/02/29/40-examples-of-brilliant-responsive-website-layouts/

http://www.w3cplus.com/source/responsive-resources-design-layout.html


Responsive

3.2、响应式结构布局

1.Grid

2.Media Queries

参考:http://www.columnal.com/demo/

http://responsive.gs/

http://www.responsivegridsystem.com/

http://www.w3cplus.com/resource/tags/259.html

http://www.w3cplus.com/css3/responsive-design-with-css3-media-queries

http://www.w3cplus.com/content/css3-media-queries


Responsive

4、响应式布局面临的几个问题

1.Fluid img

2.Fluid 其他媒体元素

3.导航处理


Responsive

4.2、Fluid 其他媒体元素

1.流式媒体

2. iframe和嵌入媒体


Responsive

4.3、导航处理

参考:http://www.w3cplus.com/source/20-useful-responsive-menu-navigation-tutorials.html

http://www.w3cplus.com/css3/responsive-mobile-navigation-menumethod

s-and-solutions.html


Responsive

5、Q&A

谢谢

作者:different (D姐)

博客:http://www.w3cplus.com

新浪微博:inline_block


  • Login