Media inquiries
Responsive Web Design -Media Query
Media (media) query is introduced in CSS3:CSS3 @media query.
Using the @media query, you can define different styles for different media types.
Instance
php 中文网 重置浏览器大小，当文档的宽度小于 500 像素，背景会变为浅蓝色，否则为浅绿色。
Run instance»
Click the "Run instance" button to view the online instance
Add breakpoints
In the previous tutorial we used rows and columns to make web pages, which are responsive but not friendly to display on small screens.
Media query can help us solve this problem. We can add breakpoints in the middle of the design draft. Different breakpoints have different effects.
Desktop
Mobile
php 中文网 Chania
The City
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
What?
Chania is a city on the island of Crete.
Where?
Crete is a Greek island in the Mediterranean Sea.
How?
You can reach Chania airport from all over Europe.
Run Instance» Click the "Run Instance" button to view the online instance
Design for mobile first
Mobile first means prioritizing mobile design when designing for desktop and other devices.
This means we have to make some changes to the CSS.
We modify the style when the screen is smaller than 768px. We also need to modify the style when the screen width is larger than 768px. The following is a mobile-first example:
[class*="col-"]{
width: 100%;
}
@media only screen and (min-width: 768px){
/* For desktop: */
.col-1 {width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
. col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}
}
Other breakpoints
You can add breakpoints according to your needs.
We can also set breakpoints for tablet devices and mobile phone devices.
Desktop device
Tablet device
php 中文网 Chania
The City
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
What?
Chania is a city on the island of Crete.
Where?
Crete is a Greek island in the Mediterranean Sea.
How?
You can reach Chania airport from all over Europe.
Run Instance» Click the "Run Instance" button to view the online instance
< div class= "col-3 col-m-3" > ...< /div >
< div class= "col-6 col-m-9" > ...< /div >
< div class= "col-3 col-m-12" > ...< /div >
< /div >
Orientation: Landscape/Portrait
Combined with CSS media queries, you can create layouts that adapt to the directions of different devices (horizontal landscape, vertical portrait, etc.).
Syntax:
orientation：portrait | landscape
portrait:Specifies that the height of the visible area of the page in the output device is greater than or equal to the width
landscape:Except for the portrait value, all are landscape
