English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS media queries allow you to format documents to be displayed correctly on output devices of different sizes.
Media queries allow you to customize the display of web pages for specific ranges of devices (such as smartphones, tablets, desktops, etc.) without changing the markup. Media queries consist of media types and zero or more expressions that match conditions with specific media features (such as device width or screen resolution).
Since media queries are logical expressions, they can be evaluated as true or false. If the media type specified in the media query matches the type of device displaying the document, and all expressions in the media query are met, then the query result is true. When the media query is true, the related stylesheet or style rules will be applied to the target device. This is a simple example of standard device media queries.
/* 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 */
}Test and see‹/›Tip:Media queries are an excellent method for creating responsive layouts. With media queries, you can customize the website for users browsing on smartphones or tablets, etc., without changing the actual content of the page.
You can use CSS media queries to change the width of the web page and related elements to provide the best viewing experience for users on different devices.
The following style rules will automatically change the width of the container element based on the screen or viewport size. For example, if the viewport width is less than768pixels, it will cover the width of the viewport by100%, if it is greater than768pixels but less than1024pixels, it will be750 pixels, and so on.
.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;
}
}Test and see‹/›Note:You can use CSS on elements3 Box-sizing Adjustmentproperties to create more intuitive and flexible layouts more easily.
You can also use CSS media queries to make your multi-column website layout more adaptable, and only a little customization is needed to respond to devices.
If the viewport size is greater than or equal to768pixels, the following style rules will create a two-column layout, but if less than or equal to768pixels, it will be presented as a 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;
}
}Test and see‹/›