Building a responsive website using a Media query.
Many people are passionate about web technology but often we do not know how is it possible to display the same content on a phone or tablet as well as on a giant screen without deformation of the display; or the content, by displaying the same document but with different overviews depending on the devices used. That seems a little ambiguous for new beginners of web development but is not a miracle, because the media-queries are there to facilitate the task.
I would give an example to illustrate this change, a wild animal “chameleon”. He has no fixed color but tries to adapt to the appearance of his body to the color of the present environment.
It’s the same as for media queries. it gives this facility to make different displays depending on the screen to be displayed.
What’s a media query?
according to Wikipedia, Media queries are a CSS3 module for adapting the content of a web page to the characteristics of the user’s device (for example, smartphone screen versus computer screen). Such adaptations became a W3C standard recommended in June 20121. This is the cornerstone of adaptive websites.
they are used by the practice of posting in different breakpoints in CSS, to create responsive designs.
What is a CSS breakpoint?
Breakpoints are points where the website content responds according to the device width, allowing you to show the best possible layout. it that the CSS will apply the display as the length of user’screen controlled by breakpoint belonging.
let’s take a look at the image above illustrating the different displays according to users’ devices. this is made possible because of this media query technique. note that the display comes from a single CSS document, making them different when reaching the breakpoint.
an example of using breakpoints in CSS:
This means that this div class will appear with different dimensions depending on the screen width of the user. This will make the display a lot responsive without worrying about the distortion of the image on the screen.
Display and Hidden Classes
it’s not only changing the size depending on a user’s device, but you can show or hide certain classes when you get to the desired breakpoint. this is where the responsive web pages reside. an example here below showing an example of showing or hiding certain classes in a media query.
if you want to deepen the notion of a media query, visit the link below.
Creating complex media queries
Sometimes you may want to create a media query that depends on multiple conditions. This is where the logical operators come in: not, and, and only. Furthermore, you can combine multiple media queries into a comma-separated list; this allows you to apply the same styles in different situations. if you want to read more follow the link below to deepen.
Happy coding!
