Look Inside
Hi there! Today we’re going to talk about CSS3 Media Queries for different devices like desktops, mobiles phones, notebooks, tablets and etc. As CSS3 extends CSS2.1 ‘Media Type’ property, we can use new CSS3 Media Queries to build websites which able to display well or look different on different devices.
How it works? CSS3 Media Queries able to check for certain conditions and apply different stylesheets on it. For example, you could have one stylesheet for desktop device and a different one for mobile phones devices. It is surely helps a lot since we can have a mobile page without changing the content but just with CSS.
Continue on below to see the CSS Media Queries for different devices, or see the live action through demo!
CSS3 Media Queries Markup
CSS3 Media Queries will uses max-width and min-width to check for browser viewing resolution and apply the stylesheet only if conditions are met.
/* Use max-width */
@media screen and (max-width: 600px) {
h1 {
font-size: 24px;
}
}
/* Use max-width */
@media screen and (min-width: 900px) {
h1 {
font-size: 33px;
}
}
/* Or mix both */
@media screen and (min-width: 600px) and (max-width: 900px) {
h1 {
font-size: 28px;
}
}
Also, CSS3 Media Queries support for actual device screen detection through device-width media query.
/* iPhone and Smartphones (portrait and landscape) */
@media screen and (min-device-width : 320px) and (max-device-width: 480px) {
.class {
background: #000;
}
}
max-device-width refers to the width of the device’s entire rendering area (the actual device screen). While max-width refer to the width of the target display area (the browser).Of course, you can also use media query to detect orientation (portrait or landscapes) as well. However these media queries only work for the iPad.
/* iPads (landscape) */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.box {
width: 500px;
}
}
/* iPads (portrait) */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.box {
width: 300px;
}
}
viewport meta inside header. For example:<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Separate Media Query Stylesheets
If you wish to have different stylesheets for different devices, you can call the stylesheets like following way.
<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width: 480px)" href="iphone.css" /> <link rel="stylesheet" media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="ipad.css" />
CSS3 Media Queries for Standard Devices
That’s all about CSS3 Media Queries. Below shown the media queries for standard devices, you can incorporate these at the bottom of your existing stylesheet, and define own styles for different devices on it.
After that resize your browser, it should works!
/* 1024px Screen */
@media screen and (max-width : 1024px) {
/* CSS Styles */
}
/* 800px Screen */
@media screen and (max-width : 800px) {
/* CSS Styles */
}
/* 640px Screen */
@media screen and (max-width : 640px) {
/* CSS Styles */
}
/* iPad with landscape */
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* CSS Styles */
}
/* iPad with portrait */
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* CSS Styles */
}
/* Smartphones and iPhones */
@media screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* CSS Styles */
}