Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

Media Queries

The Media query is a CSS3 module allowing content rendering to adapt to the size of the device it is being viewed on. There are two types of media queries. The first is responding to the viewing dimensions of the device the website is being viewed on and the second is responding to device contrainst. We will cover how to code based on the dimension of the browser.

mobile web design requires media queries

The media query is a technique introduced in CSS3. It is useful when you want to modify your site or app depending on a device's general type or specific characteristics and parameters. This means even styles definition can behave intelligently subject to certain mentioned conditions. Conditions could be the device's screen size, the device's orientation, and even the type of device. Responsive web is the need of the day, and intelligent styling is the answer. Media queries in CSS3 allow us to define conditions based on specific attributes that may be apart from those mentioned. Let's try to make things more transparent by using an example.

@media screen and (min-width: 480px) {

// Your CSS-Code Goes Here

}

The above lines of code are adding conditions to the CSS. @media is selecting the type of media to screen and doing (and) is performing logical operator AND with a CSS expression within parenthesis. If the media type is Screen and width is >=480px then the lines of CSS coding enclosed will be applied.

While developing a website, we try to make it look the best no matter what device it is being viewed on. But we do not have control over the types of devices or some other factors. Media queries empower us with the ability to add intelligence to the styling. Below we will discuss a few of the conditions, attributes, or factors that we may use as a base for adjusting our web design layout.

Screen Size

Screen size is the total size of the device used to access the website. It is the height * width – borders of the Screen. Screen size is a significant factor in tailoring styles because having fonts appear as too small or too larger could irriate the end user. Devices frequently used to view your website could be a personal computer with a small or larger monitor, tablets (i-pads, kindles, etc), and smartphones, but others include Smart TVs, Smartwatches, and game consoles. There could be a considerable variation in screen sizes, and one may not be able to tailor the web for every size, but it is recommended to tailor screen sizes with the most market share.

Resolution

First screen size and now resolution. Are we kidding? Not really, as the exact screen sizes could have different resolutions. So, our styling must be tailored for the most used screen resolutions. For this reason, we suggest using the same break points used by the popular CSS framework, Bootstrap.

ViewPort

The viewport is a visible area but isn't it covered under Screen size or resolution? It certainly is, but there is something more to add. Viewport in our case of the web would be the visible area of the webpage or web app. It is certainly adjusted with the changing device, but windows resizing should also adjust it, especially PCs. For example, we have a browser window on a PC, and we resized it by reducing the height and width. Such cases should also be handled in conditional CSS. If we have handled Screen size and resolution well: This has already been covered.

Device Orientation

Orientation may be portrait or landscape. The portrait orientation has a smaller width and longer height than the landscape while landscape orientation has a longer width and smaller height. The same styling cannot work for both. So we can use media queries to adjust the layout of our content based on how the user is viewing our content.

Multimedia Devices

Media queries can be used for those mentioned above, but its power is not limited to it. We can adjust the navigation menu, change the fonts, change the page's layout, and even do more. We may adjust a page for a speech reader or simply a printer. There are many things to consider when designing your website's layout. It is impossible to adjust your website to fit every single multimedia device out there so you choose the once that your research shows are the most used devices to view your website and you code from there. (You can get this information from Google Analytics.)

How To Create Media Queries Video

NOTES

After you watch the video on CSS Media Queries, please leave a comment (on YouTube) to indicate that you have completed this step. In the comments, write "Now I understand Media Queries".(10 minutes)

Media Query Code Template

If you read the information above and reviewed and understand the demos then go ahead and move to the next page to learn more CSS.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved