Media queries are a powerful tool that enables you to tailor the appearance of your website for different devices like mobile phones, tablets, and desktops, all without needing to change your underlying code. A media query consists of a media type and one or more conditions that match specific features of a device, such as its width or screen resolution.
Media queries work like logical expressions, returning either true or false. If the media type specified in the query matches the device the website is viewed on, and all conditions in the query are met, then the query evaluates to true. When a media query is true, it triggers the application of certain styles or rules to the device it targets. Here's a simple example of a media query designed for standard devices.
/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
/* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
/* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
/* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
/* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
/* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
/* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
/* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
/* styles */
}Tip: Media queries are incredibly useful for building responsive layouts. With media queries, you can adjust the design of your website based on the device that users are using, such as smartphones or tablets, all without altering the content itself.
Utilizing CSS media queries allows you to modify the width of your webpage and its related components, ensuring an optimal viewing experience across various devices.
The following CSS rules will dynamically adjust the width of the container element based on the size of the screen or viewport. For instance, if the viewport width is below 768 pixels, the container will expand to cover the full width of the viewport. If the width is between 768 pixels and 1024 pixels, the container will be 750 pixels wide, and so forth.
.container {
margin: 0 auto;
background: #f2f2f2;
box-sizing: border-box;
}
/* Mobile phones (portrait and landscape) ---------- */
@media screen and (max-width: 767px){
.container {
width: 100%;
padding: 0 10px;
}
}
/* Tablets and iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
.container {
width: 750px;
padding: 0 10px;
}
}
/* Low resolution desktops and laptops ---------- */
@media screen and (min-width: 1024px) {
.container {
width: 980px;
padding: 0 15px;
}
}
/* High resolution desktops and laptops ---------- */
@media screen and (min-width: 1280px) {
.container {
width: 1200px;
padding: 0 20px;
}
}Note: Enhance your layouts with greater ease and flexibility by employing the CSS3 box-sizing property on your elements.
Make your multi-column website layout more versatile and responsive to various devices with some simple tweaks using CSS media queries.
With the following style rule, your layout will switch to a two-column format when the viewport size is 768 pixels or wider. However, if the viewport is narrower than that, it will revert to a single-column layout.
.column {
width: 48%;
padding: 0 15px;
box-sizing: border-box;
background: #93dcff;
float: left;
}
.container .column:first-child{
margin-right: 4%;
}
@media screen and (max-width: 767px){
.column {
width: 100%;
padding: 5px 20px;
float: none;
}
.container .column:first-child{
margin-right: 0;
margin-bottom: 20px;
}
}