1 / 9

RESPONSIVE DESIGN

RESPONSIVE DESIGN. INFO1300 LAB7 OCT.11TH. What is responsive web design. A mix of flexible grids and layouts, images and an intelligent use of CSS media queries Apply to different screen sizes, platforms and orientations Example: http://artequalswork.com http://css-tricks.com

helene
Télécharger la présentation

RESPONSIVE DESIGN

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 DESIGN INFO1300 LAB7 OCT.11TH

  2. What is responsive web design • A mix of flexible grids and layouts, images and an intelligent use of CSS media queries • Apply to different screen sizes, platforms and orientations • Example: http://artequalswork.com http://css-tricks.com http://www.evolveartistic.com

  3. MOBILE LAYOUT • Larger font size • Smaller image • Larger links/buttons, especially for touchscreen • Content: usually one column • Use percentages, instead of px

  4. Media query • Method 1: In Html • if the browser displays this page on a screen (rather than print, etc.), and if the width of the screen (not necessarily the viewport) is 480 pixels or less, then load shetland.css.

  5. Media query • Method2: In CSS • More efficient

  6. Min-width & max-width • min-width: If anything is below this limit, the style sheet link or styles will be ignored. • max-width: Anything above the maximum browser or screen width specified would not apply to the respective media query. • min-device-width and max-device-width

  7. Resources • http://lab.maltewassermann.com/viewport-resizer/ • http://alistapart.com/article/responsive-web-design

  8. ACTIVITY • Download the zip folder: https://www.dropbox.com/s/gdoxkslmnahmb3a/lab7.zip • Use the mockup for lab prep to edit main.css & mobile.css to make the page responsive to different screen sizes (&mobile version)

More Related