In 2020, the number of smartphone users is , which translates to of the world population owning a smartphone. Why is this important? Well, for a web developer this implies that majority of web browsing traffic will come from smartphones and tablets. has recorded 39% mobile users access the internet with an android device. Chances are quite high that your website will be viewed on a mobile device before desktop. 3.5Billion 45% Statcounter Using Media Query in your CSS3 will ensure that your website displays properly and neatly on mobile screens just as the desktop version would without any quirks or distortion. How it works In this tutorial, we will explore use for . let you specify a type of media to target such as or which won’t be covered here so feel free to read more about them Media Query Media Type screen Media Types print speech here. A screen type Media Query will check for the capability of the device’s screen such as width, height or resolution of the view-port(screen-size). Once the conditions are true the linked style-sheet or CSS3 enclosed in the Media Query will be applied to the website, giving it a format proportionate to the current resolution, width and height of the view-port. Syntax < =" " =" ( : 780 )" =" " /> link rel stylesheet media screen and max-device-width px href style .css Above is the CSS for initiating a file with respect to the page width of . If this is the maximum resolution of the current device’s screen, then the styles defined in ‘ will be applied. ‘style.css’ 780px style.css’ Different styles can be defined within the same CSS style-sheet such that they are only utilized if certain conditions are met. For example, this portion of our responsive CSS would only be used if the current device had a width above 480px. ( : 480 ) { div { : flex; : column; } } media screen and min-width px display flex-direction Break-Points A break-point is the minimum/maximum width at which the Media Query and it’s conditions will be initiated. For a developer, building for the right screen type will be a challenge given the innumerable mobile devices with different view-ports. However here are a few standard widths to start with. 480px, 600px, 768px, 992px, 1200px @ only screen and (max-width: ) {...} @ only screen and (min-width: ) {...} @ only screen and (min-width: ) {...} @ only screen and (min-width: ) {...} @ only screen and (min-width: ) {...} /* Extra small devices (phones, 480px and down) */ media 480px /* Small devices (tablets and large phones, 600px and up) */ media 600px /* Medium devices (landscape tablets, 768px and up) */ media 768px /* Large devices (laptops/desktops, 992px and up) */ media 992px /* Extra large devices (laptops and desktops, 1200px and up) */ media 1200px Display or Hide When using Media Queries some features for your website may not fit on smaller mobile screens. Using properties such as display:none to hide or show elements can go a long way to refine your mobile version. @ only screen and (max-width: ) { { : none; } /*If the screen size is 600px or less, hide element.*/ media 600px div .example display such as :before or :after can also be used to apply specific styling to certain HTML elements in different view-ports. Pseudo-elements Always Design for Mobile First Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices). Start your styling when the width gets than 768px (mobile), then change the design when the width gets than 768px. smaller larger Example: Change font-size on smaller displays. If the screen size is 480px or less, set the font-size of title to 40px. @ only screen and (max-width: ) { { : ; } } media 600px h1 .title font-size 40px If the screen size is 768px or more, set the font-size of title to 95px. What’s Next? So far, we’ve been able to explore the basic concepts of how some of the building blocks for responsive web design work I have found to be a great resource for further learning. w3schools
