1. The concept of MediaQuery
Set different css styles for screens of different sizes
Example
2. @media common parameters
3. Media query code example
Example of displaying MediaQuery in a browser
MediaQuery comprehensive case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media query example</title>
<style>
#div0{
width: 100%;
}
#div0 div{
float: left;
height:200px;
}
/*Three divs in a row*/
@media screen and (min-device-width:400px) {
#div0 div{
width:33.3%;
}
#div0 div:nth-child(1){
background-color: aqua;
}
#div0 div:nth-child(2){
background-color: purple;
}
#div0 div:nth-child(3){
background-color: pale violet red;
}
}
/*Two lines and three divs*/
@media screen and (min-device-width:200px) and (max-device-width:400px){
#div0 div{
width: 50%;
}
#div0 div:nth-child(1){
background-color: aqua;
}
#div0 div:nth-child(2){
background-color: purple;
}
#div0 div:nth-child(3){
background-color: pale violet red;
}
}
/*Three lines and three divs*/
@media screen and (min-device-width:100px) and (max-device-width:200px){
#div0 div{
width: 100%;
}
#div0 div:nth-child(1){
background-color: aqua;
}
#div0 div:nth-child(2){
background-color: purple;
}
#div0 div:nth-child(3){
background-color: pale violet red;
}
}
</style>
</head>
<body>
<div id="div0">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
4. Other ways to introduce media queries
Another way of writing style, write a public style, and then write your own style
The link tag imports external css, the upper link imports the public part css, and the lower link imports the media part
5. What is flex
Concept: FlexiableBox is a flexible box, which is used for flexible layout and can cooperate with rem to deal with the size adaptation problem.
5.1 flex-direction
5.2 flex-wrap
5.3 flex-flow
Code sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex layout</title>
<style>
#div0{
width:500px;
background-color: violet;
display: flex;
/* Display by row, but in reverse order*/
flex-direction: row-reverse;
}
#div0 div{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div0">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
The code about flex is written on the parent element, as shown in the figure above, if the flex-direction is column, it will be displayed vertically, if the width of the parent element is 300px, which is not enough to hold the child element, the width of the child element will be proportionally reduced . normal display. With flex-wrap, if you choose to wrap, it will automatically wrap if it cannot fit, and will not shrink the child elements.
5.4 justify-content
When the width of the parent element of the above code is 380, four cannot fit, and there is room for three, then how to deal with it, you can use the above method.
5.5 align-items
The judgment of the cross axis is to judge the main axis first. If the sorting of divs is horizontal, the horizontal axis is the main axis, the vertical axis is the cross axis, and vice versa.
The picture below shows align-item displayed in the center, located at the beginning of the container is placed on the top of the container.
align-items Each row is treated as a separate entity
5.6 align-content
align- content Look at multiple lines as a whole and sort them.
5.7 Other attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex exercise 2</title>
<style>
#div0{
display: flex;
width:400px;
height: 500px;
background-color: violet;
}
#div0 div{
width:200px;
height: 200px;
background-color: yellow;
}
#div0 div:nth-child(1){
flex-basis: 50px;
flex-grow: 1;
} #div0 div:nth-child(2){
flex-basis: 100px;
flex-grow: 4;
}
</style>
</head>
<body>
<div id="div0">
<div></div>
<div></div>
</div>
</body>
</html>
flex-basis: the base value, which indicates the specific value of the element. As in the above code, the width of the sub-element div is set to 200px, but later the base value of the sub-element div is set separately. When it is finally displayed, the base value is used prevail
flex-grow: expansion ratio, if the two sub-element divs are not wide enough, and there is still a section left on the parent element, then divide this section into proportion, the above picture is divided into 1 and 4, which is five parts, this section is divided by 5, It is the number of copies for each copy. If it is set to 1, add one copy, and if it is set to 4, add 4 copies.
flex-shrink: Similar to flex-grow.
Abbreviation for other attributes
The order of writing is enlargement ratio, reduction ratio, reference value
flex special writing
