Bodingles | Angela Yu

Intro

Media queries are a CSS technique introduced in CSS3 that are commonly used to create responsive designs that adapt to different screen sizes and orientations. Media queries are a key component of responsive design, enabling the conditional setting of CSS styles depending on the current user environment.

Media queries can target various features such as viewport width and height, device orientation, screen resolution, and user preferences like preferring reduced motion or data usage.

Media queries can also be used to change the layout of a page depending on the orientation of the browser. For instance, you can apply styles when the browser window is wider than its height (landscape mode). In addition to CSS, media queries can be used in HTML and JavaScript to conditionally load resources or execute scripts based on the device characteristics.

Setup

In oder for media queries to work, we need to add the following line to the <head> section of our HTML page:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This is setting the initial device width and scale of the screen that is displaying the webpage. Once this is determined, we can start writing our specific CSS code. The basic syntax looks like this:

@media (max-width: 600px) {
- insert css code here
}

In this particular case,

@media: is defining this as a media query
(max-width: 600px): is saying, if the current viewport is less than, or equal to 600px, the use this styling

You would then add the styling that would apply under the current conditions. And where do we get the current width? From the "meta viewport" tag in the <head> section of the originating webpage, as shown above.

Demonstration

We're going to demonstrate by creating a box with a <div>

HTML
<div></div>

In the CSS, we'll build the box:

CSS
div {
- width: 600px;
- height: 200px;
- background-color: #9bb185;
}

and it will look like this:

Now we'll write our media query:

CSS
@media (max-width: 1000px) {
- div {
  - width: 300px;
- }
}

And now if we drag thr right side of our window to the left, reducing the viewport size, you will see the box shrink to 300px wide, once we hit the 100px threshold set by the media query.

In contrast, we could use (min-width: 600px) to say if the viewport is greater than, or equal to 600px, then do a particular styling. We can also combine definitions, by calling (min-width: 600px) and (max-width: 900px) so that we are targeting the screen sizes between 600px and 900px (specifically 601px to 899px).

min/max width

When setting our min-width, or max-width, we can specify both at the same time. For example, If we wanted to target a viewport larger than 500px, and smaller than 1000px, we would use:

@media (min-width: 500px) and (max-width: 1000px) {}

which is saying, if the viewport is greater than or equal to 500px, AND less than or equal to 1000px, the apply the styling indicated.

If we look at the docs on the MDN Website, we can see a newer version of the syntax:

@media ( 500px <= width <= 1000px ) {}

Orientation

Another way to define a media query is with orientation. We could say:

@media (orientation: landscape)

which would target for styling, any screens that are in "landscape" mode. More information can be found at:

Viewport Sizes

Standard @media viewport sizes are typically determined based on common device screen sizes and orientations. Commonly used breakpoints include:

Mobile Devices
Mobile (small)	0px - 479px	@media (max-width: 479px)
Mobile (large)	480px - 767px	@media (min-width: 480px) and (max-width: 767px)

Tablets
Tablet (Portrait)	768px - 899px	@media (min-width: 768px) and (max-width: 899px)
Tablet (Landscape)	900px - 1023px	@media (min-width: 900px) and (max-width: 1023px)

Desktops
Desktop (Small)	1024px - 1279px	@media (min-width: 1024px) and (max-width: 1279px)
Desktop (Medium)	1280px - 1439px	@media (min-width: 1280px) and (max-width: 1439px)
Desktop (Large)	1440px and above	@media (min-width: 1440px)

Bootstrap Sizing
X-Small Devices (Portrait Phones)	less than 576px	@media (max-width: 575px)
Small Devices (Landscape Phones)	576px and up	@media (min-width: 576px)
Medium Devices (Tablets)	768px and up	@media (min-width: 768px)
Large Devices (Desktops)	992px and up	@media (min-width: 992px)
X-Large Devices (Large Desktops)	1200px and up	@media (min-width: 1200px)
XX-Large Devices (Larger Desktops)	1400px and up	@media (min-width: 1400px)

These sizes are often used to ensure a website is responsive and functions well across various devices and screen sizes.

When designing media queries, it's important to consider the specific layout and design needs of your site rather than targeting specific devices. This approach helps in creating a more flexible and adaptable design that works well across a range of screen sizes and orientations.

*note: on a webpage, open the developers inspector. On the top menu bar, left side is an icon for "Toggle device toolbar", (ctrl+sh+M). If the icon isn't there, click the 3-dots in the top right corner. Select "Developer Resources", then look for the icon.

This will open a window where you can either specify viewport sizes for different devices, or manually resize the window for different sizes.