[rem adaptation layout]

Posted by sirstrumalot on Sun, 02 Jan 2022 00:24:01 +0100

rem adaptive layout

What is 1.0 rem

rem is a relative unit, similar to em, which is based on the font size of the parent element
Unlike em, rem is based on the font size of the entire html page
If the font size set for the root element is 12px, the font size set for its child element is 2rem; Then the font size is 24px

2.0 media query

Media query is the new syntax of css3
Using @ media query, you can define different styles for different media types
For different screen sizes
When the browser page is resized, the page will also be re rendered according to the height and width
At present, many media queries can be used for mobile tablets

2.1 use

@media [Equipment type] [and/not/noly] (condition){
	//Corresponding style
}

@Media - define media query
[device type] - media type, query type: mobile phone, printer, tablet, etc
[and/not/only] - Keyword
[condition] - media characteristics: limit the scope of query

2.2 query media type

Different devices are classified into different device types, which are called media types

All - all devices
Screen - used for computer screen, mobile phone screen and tablet screen - (most commonly used)
print - used for printing devices such as printers

2.3 keywords

Keyword connects multiple media types or multiple media type properties together as a query condition

And - multiple media features can be connected, which is equivalent to and
not - exclude a certain media type, which is equivalent to non
only - a specific media type

2.4 media characteristics

Each media type has different characteristics. Different display widths and styles are set according to different characteristics

Width - defines the width of the visible area of the output page
max - width - defines the maximum width of the visible area in the output device
min - width - defines the minimum width of the visible area in the output device

2.5 notes

! screen and and cannot be omitted
! Max width, min width are followed by units

More media query features W3C

2.6 examples

Root node font base size under different device screens

@size: 16/750;

@media screen and (min-width:720px) {
    html {
        font-size: 16px;
    }
}

@media screen and (min-width:500px) and (max-width:720px) {
    html {
        font-size: (500px * @size);//500px * 16 / 500
    }
}

@media screen and (min-width:414px) and (max-width:500px) {
    html {
        font-size: (414px * @size); //414px * 16 / 500
    }
}

@media screen and (min-width:400px) and (max-width:414px) {
    html {
        font-size: (400px * @size);
    }
}

@media screen and (min-width:384px) and (max-width:400px) {
    html {
        font-size: (384px * @size);
    }
}

@media screen and (min-width:375px) and (max-width:384px) {
    html {
        font-size: (375px * @size);
    }
}

@media screen and (min-width:360px) and (max-width:375px) {
    html {
        font-size: (360px * @size);
    }
}

@media screen and (min-width:0px) and (max-width:360px) {
    html {
        font-size: (320px * @size);
    }
}

- media query + rem to realize the dynamic change of page elements

2.7 introduction

When the page styles are too complicated, we can use < link rel ='stylesheets' media ='screen and (min width: 320px) 'heft ='... / > To introduce different device styles

3.0 rem adaptation scheme

3.1 common dimensions of design draft

iphone(4/5) — 640px
iphone(6/7/8) — 750px
android — 320px,360px,375px,384px,400px,414px,500px,414px,500px,720px

Generally, we use one or two sets to adapt to most screens

3.2 dynamically set the size of the benchmark value font size of html

1 - suppose we need to adapt to different screens, and we developed it based on 720px screen width
2 - let's divide the design draft into several copies. Here I set it as 20 copies. In fact, the division standard is not necessarily
3 - use each copy as the base font size on html

//Use less to write here
 Divide into 20
@division: 20;

Means greater than 0 on the media query screen px，Less than 400 1 rem = 20px
@media screen and (max-width:400px){
	html{
		font-size: calc(400px / @division);
	}
}

It means that it is greater than 400 on the media query screen px，Less than 500 1 rem = 20px
@media screen and (min-width:400px) and (max-width:500px){
	html{
		font-size: calc(400px / @division);
	}
}

Means greater than 500 on the media query screen px，Less than 720 1 rem = 25px
@media screen and (min-width:500px) and (max-width:720px){
	html{
		font-size: calc(500px / @division);
	}
}

It means that it is greater than 720 on the media query screen px Case 1 rem = 36px
@media screen and (min-width:720px){
	html{
		font-size: calc(720px / @division);
	}
}

4 - when we wrote the element size according to the 720 design draft, according to the normal REM layout, we have set the width of 1rem in the same proportion under different media widths, and there is no need to change the elements on other size pages

Need a 200 px Square of div

---------------------
@size:36;

At 720 px Under the screen
div{
	width: (200rem / @size); ------->5.555555555555556rem
	height: (200rem / @size); ------->5.555555555555556rem
}

At 400 px Under the screen
div{
	width: (200rem / @size); ---->5.555555555555556rem
	height: (200rem / @size); ------->5.555555555555556rem
}

The resulting element size under screen scaling is proportional

Value method of element size
rem value of page element = px value of page element / (screen width / number of divided copies)

Topics: css3 html css

Programmer Think