• 90 likes • 225 Views
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
E N D
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 http://www.evolveartistic.com
MOBILE LAYOUT • Larger font size • Smaller image • Larger links/buttons, especially for touchscreen • Content: usually one column • Use percentages, instead of px
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.
Media query • Method2: In CSS • More efficient
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
Resources • http://lab.maltewassermann.com/viewport-resizer/ • http://alistapart.com/article/responsive-web-design
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)