Beginner Guide To Media Queries
introduction
Introduction
The internet has become vital in our modern world, where assessing the internet is now a necessity. Several people access the Web through different mediums such as laptops, mobile phones, tablets, etc. The way a webpage displays in each of the mediums varies due to the difference in screen size.
As an upcoming developer, personally the technology behind this process was unique but also difficult to understand because I had no guide in helping me understand the concept behind it.
The challenge I encountered was in designing a web page, I noticed that when I viewed the web page on my desktop, it looked perfect but when I viewed it on my phone, it became disorganized. This kept me wondering what the problem was. That was when I got to know about "Media Query". This leads us to what we will be looking at in this article, we will consider the following;
What do media queries mean?
Why are media queries important?
Basic media queries syntax.
Media types.
The key consideration in media queries.
Conditions
Breakpoints.
Madia features
What do media queries mean?
Media queries are a CSS technique used in implementing a responsive web design by allowing the content of the designed Page to adapt or adjust to the viewed screen or media types depending on the conditions set.
This implies that the webpage looks different without creating separate websites for each device.
Why are media queries important?
A responsive web page is crucial, especially when more people are accessing the internet with different media, most mobile devices. It is essential to create a user-friendly web design for several reasons.
For effective and efficient web performance.
It allows the web page to adapt or adjust to different screens.
It improves the performance of the website by reducing the amount of data needed to load a large image, only necessary for the large screens when loading the same image on the smaller screens.
Media queries improve accessibility by creating designs that are easier to read and navigate
Basic media queries syntax
A media query consists of a media type and can contain one or more expressions, which resolve to either be true or false.
The result of the query is true if the specified media type matches the type of device the document is being displayed on, and all expressions in the media query are true
@media not|only mediatype and (expressions) {
CSS-Code;
}
key consideration in media queries
There are some basic factors developers put into consideration when applying media queries ( css3) to any website which some are.
Media type, which informs the browser what kind of media this code is made for. for example, print, or screen.
The media expression is a rule, which is the condition that must be fulfilled for the contained CSS to be applied on the website.
The CSS rules that will be applied when the media expression condition is fulfilled and also the media type is valid
The UIUL design provided for the web page.
mobile first before desktop vision.
Media type
The media type is a discretional value that specifies the categories of the devices to which the media queries are applied.
It starts to run when the specified media type matches the proposed device.
The possible types of media you can specify are
Print: This determines how your page would look when you try to print.
All: it is used for all media types e.g print, screen, and speech.
Screen: laptops, mobile phones, tablets e.t.c
Speech: screen readers
When specifying the possible media type, the syntax looks like this;
/*Media query for print*/
@media print (condition: breakpoint){
/*css rules */
color: red;
}
/*Media query for screen*/
@media screen (condition: breakpoint){
/* css rules */
.body{
display: flex; }
}
/*Media query for speech devices */
@media speech (condition: breakpoint){
/*css rules */
.section{
width: 100vw;
}
}
/*for all media types */
@media all (condition: breakpoint){
/*css rules */
}
/*his will all so work for all madia types*/
@media (condition: breakpoint){
/* css rules*/
}
Because conditions and breakpoints were applied in the media type syntax let's explain the concept and their applied values.
condition
Media queries syntax condition States the condition at which the browser must be in for the CSS rules to be applied.
Two conditions are majorly used which are;
Min- width
Max-width
Min-width - this refers to the minimum value the browser must reach before it starts applying the CSS rules in the media query. For example, if you set the min-width to 480px, all the CSS styling embedded in the media query would apply when the browser window is 480px and above.
Max-width - In this case, the CSS styles would be applied when the browser reaches a maximum number.
Example
@media screen (min-width:480px){
/*css rules */
}
@media all (max-width: 780px){
/*css rules */
} /*The CSS embedded in the media query
would only apply when the browser window is
780px and above, i.e, large screens */
Breakpoint
is the “point” at which a website's content and design will adapt in a certain way to provide the best possible user experience.
some of the common breakpoints used by developers
Mobile devices – 320px — 480px.
iPads, Tablets – 481px — 768px.
Small screens, laptops – 769px — 1024px.
Desktops, large screens – 1025px — 1200px.
Extra large screens, TV – 1201px, and more.
Media features
These refer to the characteristics or attributes of the devices used by the users to access the web page. They are always enclosed in parentheses. The following are some of the media features that can be included in the @media rule-set.
aspect-ratio – is used to specify the width/height aspect ratio of the device’s viewport. Its value is in units of length. It can also take a min/ max prefix.
width – is used to target the width of the device’s viewport. Its value is in units of length. It can also take a min/ max prefix.
height – is used to target the height of the device’s viewport. Its value is in units of length. It can also take a min/ max prefix.
orientation – is used to target the orientation of the device’s viewport. Its value is either portrait or landscape.
resolution – is used to target the pixel density of the user’s output device. Its value is in dots per inch (dpi) or dots per pixel (dppx).
scan – used to target the scanning process of an output device.
grid – used to target a grid or bitmap screen device. Its value is either 1 for grid devices or 0 for other devices.
color – used to target the bits per color component of the output device. The value is an integer.
color-index – used to target the number of entries in the user’s output device’s color lookup table. Its value is an integer.
color-gamut – used to target the range of colors supported in the user’s output device.
monochrome – used to target the number of bits per pixel in the user’s output device’s monochrome frame buffer. Its value is an integer. It is 0 if the device is not monochrome.
display-mode – used to target the display mode specified in the web app manifest.
pointer – used to identify whether the primary input mechanism is a pointing device.
hover – used to identify @media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.
You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).
In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device determines if the primary input mechanism allows users to hover over an element.
There are many more features, including any-pointer, any-hover, inverted-colors, update, overflow-inline, overflow-block, light-level, prefers-reduced-transparency, prefers-contrast, scripting, and prefers-color-scheme.
Conclusion
Having understood what media queries are all about, it is important to implement the technology in your stylesheet for the proper response of the web page to different screen sizes.
Media requests can be used to verify a variety of things, such as the width and height of the viewport
width and the height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
Resolution
A tailored style sheet (responsive web design) for desktops, laptops, tablets, and mobile phones can be archived by using media queries.
Media queries can also be used to specify that certain styles are only for printed documents or for screen readers media type: print, screen, or speech).
Apart from the types of media, there are also features of the media. It provides more specific details for media queries, allowing you to test a specific function of the user agent or display device.
