1, MediaQuery
1. Definitions
Set different css styles for different screen sizes.
<body> <div id="div0">111</div> </body>
<style>
#div0{
width: 100px;
height: 200px;
}
/* max-device-width Device represents the maximum width of the device*/
@media screen and (max-device-width:199px) {
#div0{
background-color: rgb(233, 147, 54);
}
}
@media screen and (min-device-width:200px) and (max-device-width:300px) {
#div0{
background-color: blue;
}
}
@media screen and (min-device-width:301px) {
#div0{
background-color: rgb(191, 26, 174);
}
}
/* min-width Used to set the minimum width of the browser. No device*/
@media screen and (min-width:500px) and (max-width:700px){
div{
background-color: aqua;
}
}
</style>
2. @media common parameters
| Attribute name | effect |
|---|---|
| width,height | Browser visual width and height |
| device-width | Width of the device screen |
| device-height | Height of device screen |
3. Introduction method
3.1 style inline style
<style>
.div0 {
width: 100%;
height: 500px;
}
.div0>div {
float: left;
}
/* Three div's in a row */
@media screen and (min-width:800px) {
.div0>div {
width: 33.3%;
height: 200px;
}
.div1 {
background-color: aqua;
}
.div2 {
background-color: rgb(90, 204, 8);
}
.div3 {
background-color: rgb(191, 13, 214);
}
}
/* Two lines and three div */
@media screen and (min-width:701px) and (max-width:799px) {
.div0>div {
width: 50%;
height: 200px;
}
.div1 {
background-color: aqua;
}
.div2 {
background-color: rgb(90, 204, 8);
}
.div3 {
background-color: rgb(191, 13, 214);
}
}
/* Three lines and three div */
@media screen and (max-width:700px) {
.div0>div {
width: 100%;
height: 200px;
}
.div1 {
background-color: aqua;
}
.div2 {
background-color: rgb(90, 204, 8);
}
.div3 {
background-color: rgb(191, 13, 214);
}
}
</style>
<div class="div0">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
3.2 style internal style
<style>
/* Common style */
.div0 {
width: 100%;
height: 500px;
}
.div0>div {
float: left;
height: 400px;
}
.div1 {
background-color: aqua;
}
.div2 {
background-color: rgb(90, 204, 8);
}
.div3 {
background-color: rgb(191, 13, 214);
}
</style>
<style media="(min-width:800px)">
/* Three div's are displayed in one row */
.div0>div {
width: 33.3%;
}
</style>
<style media="(min-width:701px) and (max-width:799px)">
/* Two lines show three div's */
.div0>div {
width: 50%;
}
</style>
<style media="(max-width:700px)">
/* Three lines show three div's */
.div0>div {
width: 100%;
}
</style>
3.3 the external style is written in the link label, and the external style sheet is introduced conditionally
<link rel="stylesheet" href="./1.css"> <link rel="stylesheet" href="./2.css" media="(min-width:800px)"> <link rel="stylesheet" href="./3.css" media="(min-width:701px) and (max-width:799px)"> <link rel="stylesheet" href="./4.css" media="(max-width:700px)
2, flex (FlexiableBox)
1. Definitions
That is, the elastic box is used for elastic layout, which can cooperate with rem to deal with the problem of size adaptation.
2. Common attributes (set on parent element)
| Attribute name | effect | Value |
|---|---|---|
| flex-direction | The arrangement of child elements in the parent element box | Row (default, left to right), row reverse, column, column reverse |
| flex-wrap | Whether the child element wraps in the parent element box | Wrap, no wrap (by default, it will be compressed when there is not enough space) |
| flex-flow | Abbreviations of the above two properties | The first position writes the arrangement space, and the second position writes the line feed |
| justify-content | Set to spacing when there is space left | Flex start (default), flex end, center, space between (leave both sides blank), space around (leave both sides blank) |
| align-items | Sets (single row) the default alignment of each flex element on the cross axis | If the x axis is a cross axis, the alignment mode can be set to left, middle and right; If the y axis is a cross axis, the alignment can be set to top, middle, and bottom. flex-start,flex-end,center |
| align-content | Sets (multiline) the default alignment of each flex element on the cross axis | Flex start (at the beginning of the container), flex end (at the end of the container), center, space between, space around |
2. Other attributes (set on child elements)
| Attribute name | effect | Value |
|---|---|---|
| flex-basis | Set the elastic box expansion reference value | Equivalent to width. After setting, the original width will become invalid:% (percentage of parent element), px |
| flex-grow | Set the expansion ratio of the elastic box | When there is extra space, how to allocate the remaining space? The value represents the number of shares in the remaining space |
| flex-shrink | Sets the reduction ratio of the elastic box | When the value is 0, it means that reduction is not allowed. The larger the value, the more reduction is allowed |
| flex | Abbreviations for the above three attributes | grow–shrink–basis |
3. Set the special writing method of scaling for child elements
| Attribute name | effect | Value |
|---|---|---|
| flex:auto; | Allows automatic expansion and reduction, and the third value does not matter | flex: 1 1 auto; |
| flex:none; | It cannot be expanded or reduced automatically. The third value shall prevail. The original width value is invalid, or a specific width can be set. | flex: 0 0 auto; |
| flex: 0%; flex:100px; | Allows automatic expansion and reduction, and the third value does not matter | flex: 1 1 0%; flex: 1 1 100px; |
| flex: 1 | Allows automatic expansion and reduction, and the third value does not matter | flex: 1 1 0% |
4. Case 1 – input box – left and right label labels
<body>
<div class="div0">
<label for="">full name</label>
<input type="text" name="" id="">
<label for="">go</label>
</div>
</body>
<head>
<style>
*{
margin: 0;
padding: 0;
}
.div0{
width: 250px;
display: flex;
border: 1px solid #dcdcdc;
margin: 200px;
}
.div0 label{
flex: 1;
background-color: #f5f5f5;
font-family: "Regular script";
text-align: center;
font-size: 1.2rem;
line-height: 50px;
}
.div0 input{
border: none;
outline: none;
height: 50px;
}
.div0 label:nth-child(3){
/* Because flex has been set to 1 above, the setting of width does not take effect at this time */
/* Set the blank space on both sides of go, that is, set the width of go*/
flex: 0 0 35px;
}
</style>
</head>
5. Case 1 – input box – the text labels in the left part of each input box are aligned to the right
<form action="" >
<div id="form">
<div>
<label for="" >full name:</label>
<input type="text">
</div>
<div>
<label for="">Please input a password:</label>
<input type="text">
</div>
</div>
</form>
<style>
#form div{
display: flex;
margin-top: 10px;
/* If the size of the child elements in the elastic box is not limited, the size will change accordingly */
align-items: flex-start;
}
#form div label{
flex: 0 0 100px;
text-align: right;
}
</style>
3, Use of rem
rem: the unit of font size relative to the root element.
em: the unit of font size relative to the parent element.
/* Sets the size of the root element rem */
html{
font-size: 10px;
}
div{
font-size: 2rem;
}
Case 3: use media query + rem or js to automatically adjust the font size in different viewports
<script>
var c = ()=>{
// Gets the width of the device
var deviceWidth = document.documentElement.clientWidth;
// Sets the calculation criteria for font size
var size = (20 * (deviceWidth / 320)) > 40 ? 40 + "px" : (20 * (deviceWidth / 320) +"px")
document.documentElement.style.fontSize=size;
}
// When listening to the load event and resize event, execute function c
window.addEventListener("load",c);
window.addEventListener("resize",c);
</script>
Case 4: adaptive layout
Different devices use different html pages or local scaling
- Jump to different html pages through js
<script type="text/javascript">
var redirect=()=>{
// Get device information
let userAgent=navigator.userAgent.toLowerCase();
// Judge equipment type
let deviceReg = /ipad|iphone|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/;
if(deviceReg.test(userAgent)){
// Jump to move to page
window.location.href="move.html"
}else{
window.location.href="pc.html"
}
}
redirect();
</script>
- Three column responsive layout: local adaptation + media query
<div class="div0">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
</div>
<style>
.div0{
display: flex;
}
/* The two columns on both sides are fixed during page scaling, and only the middle column changes size */
.d1{
background-color: yellow;
flex: 0 0 50px;
}
.d2{
background-color: rgb(27, 27, 172);
flex: 1;
}
.d3{
background-color: yellowgreen;
flex: 0 0 50px;
}
@media screen and (min-device-width:500px) and (max-device-width:700px){
.d2{
background-color: rgb(214, 24, 195);
flex: 1;
}
}
</style>