I have a "pagewrap" container that wraps the "header", "content", "sidebar", and "footer" together. Below is the main structure of the layout. I’m not going to go through the details of the HTML code. If the viewport is narrower than 650px, it expands the content container and sidebar to fullwidth to form a single column layout. Media query is used to check if the viewport is narrower than 980px, then the layout will turn to fluid width instead of fixed width. The page’s container has a width of 980px which is optimized for any resolution wider than 1024px. If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr. Resize your browser to see how the layout automatically flows based on the width of the viewport (browser viewing area).
Google web designer responsive tutorial how to#
This tutorial will show you how to create a cross-browser responsive design with HTML5 & CSS3 media queries.īefore you start, check the final demo to see how it looks like. The layout needs to be automatically adjusted to fit all display resolution and devices. So the traditional fixed width design doesn’t work any more. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web.
Users no longer just browse the web with desktop computers. Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher.
0 kommentar(er)
