Responsive Meta Tag
Last updated
Last updated
When writing our CSS we should put our defaults at the top to apply to all devices.
These defaults should be focused on MOBILE-sized screens.
We call this mobile-first approach.
This way, older mobile devices that don't understand the media queries, will still display the default values that are optimized for mobile small screens.
We will be leveraging the default styles of the elements before adding layouts in the media queries.
Most semantic HTML elements we use for layout are block level elements. This means by default the contents inside will align vertically one after another like we've seen with other text based elements. HTML adapts to any screen size and we can use this to our advantage to style our layouts for all screen sizes.
One of the best ways to get started building any web application is to iron out the layout components before worrying about what's inside. We can look for common patterns to group in larger boxes. Everything on the web fits into this model.
To simply decouple our layout from other elements its much easier and more efficient to keep these layout elements separate than grouping them together by a class when it might seem redundant to add another div. Adding another div for the layout specific style ensures a more module component.
Let's look at a common layout pattern. Header, content, right sidebar, footer. We can imagine the layout structure will look similar to the image below. The wire frame on the left represents the layout structure smaller screens sizes will render. On the right, when there is enough minimum width to support the content side by side, Float the Main Content and Sidebar Left to each other.
Do not use absolute width.
Use relatively sized fonts.
Use the fluid grid and fluid image.
