Percentage adaptation mode
In this method, only the width can be adapted, but the height cannot be adapted. Only a certain height can be set
Requirements: four div s, with a height of 100px and an equal width, are arranged horizontally
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<style type="text/css">
body {
margin: 0;
}
div {
width: 25%;
height: 100px;
float: left;
}
.box1 {
background: red;
}
.box2 {
background: blue;
}
.box3 {
background: green;
}
.box4 {
background: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
flex layout adaptation (used with rem adaptation)
Compatibility
IE10 and above, ios9 and above, Android 4.4 and above
characteristic
By default, all child elements are displayed in one row, even if you give them a large width
If the parent adds this attribute, the float and vertical align of the child will become invalid
If the model is compatible with the lower version, prefix - webkit -, including all the attributes described later
For container attributes (parent element style), see the rookie tutorial or Ruan Yifeng's tutorial. Here are some key knowledge.
flex-direction: Arrangement direction of child elements (direction of spindle, if set) column，It means that the spindle has rotated 90 degrees) flex-wrap: Line feed mode flex-flow: Abbreviations of the above two methods justify-content: Horizontal alignment (alignment of child elements on the main axis) align-items: Vertical alignment (alignment of child elements on the cross axis) align-content: Multiline vertical alignment (alignment of multiple axes)
Item properties (child element styles)
Order: sort position / / if two values are equal, sort them in writing order
Flex growth: extension scale
Flex growth when the width of the parent is greater than the sum of the widths of all child elements, set the expansion ratio of child elements according to the remaining space of the parent (after setting, the fixed width given by the element will be overwritten). It is a coefficient
The default is 0, that is, if there is remaining space, it will not be expanded
Remaining space
Remaining space = width of parent - the sum of the widths of all child elements
Note: if the initial width is not set and there is no content, it defaults to 0, otherwise it is the width of the content. For example, if the text is set, it will have an initial width.
Calculation formula of sub element width
Width of child element=(Width of parent-Width and width of all child elements)//Sum of flex growth attribute values of all child elements * flex growth attribute value of child elements + initial width of child elements
Flex shrink: shrinkage ratio
Flex shrink when the sum of the widths of all child elements is greater than the width of the parent, set the shrinkage ratio of the child elements according to the excess space (after setting, the fixed width given by the element will be overwritten). It is a coefficient
The default is 1. If you give a 0, it will not shrink
Out of space
Out of space = width of all child elements and - width of parent
Calculation formula of sub element width
1,Calculate the sum of the widths of all child elements beyond the space-Width of parent
2,Initial width of child element*Of child elements flex-shrink value
3,Calculate the sum of all the results in step 2
4,The second step for each child element/Step 3*First step
5,Initial width of child element-Step 4
Flex basis: the size of the element
flex: short for the above three attributes
Align self: separate vertical alignment (in the direction of the cross axis)
Dynamically generate viewport adaptation mode
This method is actually to dynamically set the scaling scale, dynamically create a meta tag, and put the calculated scaling scale into the content attribute of the tag
If the target size is set to 320, the whole screen width is 320px, and if it is set to 750, the whole screen is 750px, so that each element in our page can set the width and height according to the design drawing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
(function(){
var w = window.screen.width;
var targetW = 320;
var scale = w/targetW; //Current size / target size
var meta = document.createElement("meta");
meta.name = "viewport";
meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
console.log(scale);
document.head.appendChild(meta);
})();
</script>
<!--
<meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
-->
<style type="text/css">
body {
margin: 0;
}
div {
width: 80px;
height: 100px;
float: left;
}
.box1 {
background: red;
}
.box2 {
background: blue;
}
.box3 {
background: green;
}
.box4 {
background: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
rem adaptation mode
The first step of rem adaptation method is to set the constraints of the viewport (fixed)
Let's take a look at what happened before rem adaptation Title The analysis results show that when the screen width is 320, the width ratio of the box is 200 / 320. When the screen size of a mobile phone is different, such as 375, the width ratio of the box is 200 / 375Then, in different mobile phones, the proportion of the same box to the width of the whole screen is different, so the effect is also different
For this problem, REM can be used for adaptation. The most important thing of REM adaptation is to set the width of the screen area according to the font size of the html root element, so that the whole screen becomes 1rem as the benchmark, and then try rem as the unit when setting each element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Title</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width:2rem;
height: 0.5rem;
background-color: red;
}
</style>
<script>
(function () {
// Gets the width of the screen area
var w = document.documentElement.clientWidth
// Get html root element
var htmlNode = document.querySelector('html')
// Set font size
htmlNode.style.fontSize = w + 'px'
})()
</script>
<body>
<div class="box"></div>
</body>
</html>
In this way, when the screen width is 320, 1rem is equal to 320, 2rem is equal to 2 * 320, and when the screen width is 375, 1rem is equal to 375, that is, 1rem will adapt to the screen width
Media query
What is media query
Media Query is a new syntax for CSS3.
Using @ media query, you can define different styles for different media types
@media can set different styles for different screen sizes
When you reset the browser size, the page will also be re rendered according to the width and height of the browser
At present, multimedia query is available for many apple phones, Android phones, tablets and other devices
Media query syntax specification
Start with @ media and pay attention to the @ symbol
mediatype media type
Keyword and not only
The media feature must be contained in parentheses
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype query type
Dividing different terminal devices into different types is called media type
keyword
Keyword connects media types or multiple media features together as a condition for media query.
And: multiple media features can be connected together, which means "and".
Not: excluding a media type, which means "not" and can be omitted.
only: specifies a specific media type, which can be omitted.
Media characteristics
Each media type has its own specific characteristics, and different display styles are set according to the media characteristics of different media types. Let's know three for the time being.
Note that they are to include in parentheses:
