This blog serves as a simplification of what Responsive Web Design is and how to use Media Queries in CSS.
There is a Space Themed CodePen at the bottom of the blog that covers the basics of media queries. Jump to CodePen.
Responsive Design & Fluid Layout
What is Responsive Design?
It is an approach to web design when creating layouts that can respond to the device being used to view content.
The term "Responsive Design" was named by Ethan Marcotte in 2010 to describe three techniques used together:
- Flexible Grids
- Flexible Images
- Media Queries
Flexible Grids
Before Flexbox or Grid, you would either create a liquid or fixed layout for web pages. Both layouts are problematic, however, since they only are their correct size on the screen of the person who designed the web page.
Liquid layouts would stretch to fill the browser, but when they shrunk, the design would appear squished, with really long or thin text lines, making them incredibly difficult to read.
Fixed layouts would happen to give a horizontal scroll bar to screens of devices smaller than the site width.
Flexible Images
In order to make an image flexible, all you would have to do is set its max-width to 100%, which means that it would take up 100% of its container, but never grow larger. It would resize when the browser resizes and adjusts based on the length of its container.
Media Queries
Media Queries allow you to change the layout of your CSS based on the screen size. They allow you to set conditions when a layout should be changed to adjust to the right size of the user's screen.
Before Responsive Design, JavaScript could be used in order to detect the correct screen size to load the correct CSS to.
Float
Developers needed a way to create layouts where they wouldn't have to adjust the screen size manually for every single device screen size.
Flexible grids were used so that this manual adjustment wouldn't need to happen. Grids would adjust themselves. When using a Flexible grid, you wouldn't need to set a breakpoint until the content would begin to look bad.
Float was able to create flexible grids by giving each floated element a percentage width. The total of the percentages of the floated elements would be set so that they wouldn't exceed beyond 100%.
Ethan Marcotte used a formula that would be able to correctly calculate what the width of elements would be, by dividing pixels.
If a container was set to a width of 500px, we would need a way to ensure that the inner column elements would not exceed the container width. The formula would be to divide the inner columns pixels by the parent columns pixels.
Say we had a column element of 100px. 100px / 500px = 0.2, so we would move the decimal to places to the right setting the width of the column to be 20%.
Flexbox and Grid
CSS Flexbox and Grid are Responsive by default.
Flexbox's default behavior is to shrink & distribute space between flex-items depending on the size of their container, the flex-container.
CSS Grid implemented a new unit called fr. The unit would distribute available space between grid tracks. fr is a fraction of the space in the available container.
The viewport meta tag
Responsive HTML pages will usually have a meta tag in the head of the document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The meta tag stands for metadata. What is metadata? Metadata is "a set of data that describes and gives information about other data."
Metadata always goes in the head of an HTML document. They can be used to define character sets, page description, keywords, author of the document and viewport settings. None of the information inside of meta tags is displayed to the user.
In the above example, the attribute name is used to define the viewport. The viewport is the area of a user's device screen that is visible.
The content attribute in conjunction with viewport allows the developer to control the viewport and set the dimensions and scaling of the web page.
content="width=device-width, initial-scale=1.0"
The first part of the content attribute is setting the width of the web page to be the screen-width size of the user's device. The initial-scale=1.0 is setting the initial zoom level for the page when it is loaded by the browser.
Using Media Queries
Media queries use an optional media type and any amount of media feature expressions. You can combine multiple queries using logical operators.
A Media Query will compute to true when a media type (if a media type is specified) matches with the device on which the document is viewed on AND all of the media feature expressions compute as true. Media Queries are case-insensitive. Queries with unknown media types always compute to false.
allprintscreenspeech
We will be using the screen media type. When you don't define any media types the Media Query will default to all.
Syntax
@media screen and (max-width: 320px) {
div {
width: 250px;
}
}
- The first is
@mediawhich begins the query. - I set the media type to
screen. I used one of the logical operatorsandwhich will combine the media type and the condition for the browser. - The
max-widthmedia feature denotes that when the screen size is smaller than320px, change the layout to what you will use in the following code block.
Hit "Edit on CodePen" To follow along.
And there you have it, this blog covered the general basics of media queries. Thanks for reading!
Top comments (0)