Rem layout for mobile web development
Target (directory)
- Ability to use rem units
- Ability to use the basic syntax of media queries
- Able to use Less basic grammar
- Ability to use nesting in Less
- Ability to use calculations in Less
- Able to use 2 rem adaptation schemes
Thinking: 1. Can the page layout text change with the screen size?
2. Flow layout and flex layout are mainly for the width layout, how to set the height?
3. How to make the height and width of the element scale proportionally when the screen changes?
1. The basis of rem?
rem (root em) is a relative unit,
Similar to em, em is the font size of the parent element, 2em is equivalent to magnifying the font of the parent element twice
Code demo:
div{
font-size: 12px;
}
p {
width: 5em;
height: 5em;
/* 运行 width: 60px、height:60px */
background-color: aqua;
}
<div>
<p></p>
</div>
There are pictures as evidence
The difference is that the benchmark of rem is relative to the font size of the html element
For example, if the root element (html) is set to font-size = 12px, and the non-root element is set to width: 2em, it is replaced by px, which means 24px.
Code demo:
html{
font-size: 12px;
}
p {
width: 6rem;
height: 6rem;
/* 运行 width: 72px、height:72px */
background-color: aqua;
}
<div>
<p></p>
</div>
There are pictures as proof:
The advantages of rem: you can change the size of the elements in the page by modifying the size of the text in the html, which can be controlled as a whole
2. Media inquiries
What is a media query
Media Query is a new syntax of 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 be re-rendered according to the width and height of the browser
Media queries are best written from small to large width
Grammar specification
@media mediatype and|not|only (media feature){
CSS-Code;
}
- At the beginning of @media pay attention to the "@" sign to declare media queries
- mediatype What kind of media type, printer or mobile phone screen
- Keywords and not only
- media feature media features must be wrapped in parentheses
1. Mediatype query type
Property value:
(1) all: applicable to all devices
(2) print: used for printer and print preview
(3) screen: used for computer screens, tablets, smart phones, etc.
2. Keyword and|not|only
Keywords connect media types or multiple media characteristics together as conditions for media queries
- and: multiple media characteristics can be connected together, equivalent to "and"
- not: exclude a certain media type, equivalent to "not"
- only: Specify a specific media type
3. Media characteristics
Each media type contains its own different characteristics, and different display styles are set according to the media characteristics of different media types
Property value:
width: defines the width of the visible area of the page in the output device
min-width: defines the minimum visible area width of the page in the output device
max-width: defines the maximum visible area width of the page in the output device
Code demo:
@media screen and (max-width: 600px){
/* 设置css样式 */
body{
background-color: green;
}
}
Meaning: On the screen, the maximum width is 600px, and the background color of the body is set to green
max-width: 600px means less than or equal to 600px.
Multiple conditions plus and connection
Media query + rem to achieve dynamic size changes of elements
Media query + rem to achieve different device widths, to achieve dynamic changes in page element size
Case: When the screen becomes smaller, the page width and height become smaller, and the font becomes smaller; when the screen becomes larger, the page width and height become larger, and the font becomes larger
@media screen and (min-width: 320px){
{
html{
font-size: 50px;
}
}
@media screen and (min-width: 640px){
html{
font-size: 100px;
}
}
.top{
height: 1rem;
font-size: 0.5rem;
background-color: rgb(33, 192, 179);
color: grey;
}
<div class="top">
购物车
</div>
Bring in resources
When there are many styles, you can use different stylesheets for different media.
That is, directly judge the size of the device in the link, and then reference different css files
Grammar specification
`
<link rel="stylesheets" href="index.css" media="mediatype and|not|only (media feature)">`
<link rel="stylesheets" href="index.css" media="screen and (min-width:640px)">
Three, Less basics
Introduction to Less
Less (Learner Style Sheets) is a CSS extension language, also known as CSS preprocessor
Less is a CSS preprocessing language that extends the dynamic characteristics of CSS.
Based on its CSS language, it introduces functions such as variables, mixins, calculations and functions, which greatly simplifies the writing of CSS and reduces the maintenance cost of CSS.
Less Chinese website: http://lesscss.cn/
Common CSS preprocessors: Sass, Less, Stylus
Less installation
-
Install node.js, URL: http://nodejs.cn/download/
Installation is to keep clicking next
-
To check whether the installation is successful, use cmd command (win10: window+r to open and run cmd)-enter "node -v" to view the version
-
To install Less online based on nodejs, use the cmd command "npm install -g less"
-
Check whether the installation is successful, use the cmd command "lessc -v" to check the version
Use of Less
First create a file with the suffix ".less", and write less statements in this less file
- Less variables
Variables mean that there is no fixed value and can be changed, because some colors and values in CSS are often used.
@变量名:值;
Naming rules
- Must be prefixed with @
- Cannot contain special characters
- Cannot start with a number
- Case sensitive
For example: Wrong variable name: @2color, @color~@#
Define the variable first, and then use the variable for an element below
2. Less compilation
Less contains a set of custom grammars and a parser. Users define their own style rules according to this grammar. These rules are finally compiled and generated by the parser to generate the corresponding CSS files.
Compile the less file into a css file.
Use the vscode less plugin, the plugin is called Easy LESS.
Search for Easy LESS in the vxcode store, install it, and then reload vscode. Just save the less file and the CSS file will be automatically generated.
3. Less nesting
The style of the child element is written directly in the style of the parent element
@color:pink;
@font14: 14px;
body{
background-color: @color;
}
div{
color: @color;
font-size: @font14;
a{
color: @color;
}
}
If you meet (intersection|pseudo class|pseudo element selector)
- If there is no ampersand in front of the inner selector, it is parsed as a descendant of the parent selector
- If there is an ampersand, it is parsed as a pseudo-class or pseudo-element of the parent element itself or the parent element
less file content
@color:pink;
@color1:blue;
@font14: 14px;
body{
background-color: @color;
}
div{
color: @color;
font-size: @font14;
a{
color: @color;
&:hover{
color: @color1;
}
}
&::before{
content: "";
font-size: @font14;
}
}
less编译后的css样式
body {
background-color: pink;
}
div {
color: pink;
font-size: 14px;
}
div a {
color: pink;
}
div a:hover {
color: blue;
}
div::before {
content: "";
font-size: 14px;
}
3. Less operation
- How to write multiplication sign (*) and division sign (/)
- There is a space in the middle of the operator separated by 1px + 5
- For the operation between the values of two different units, the value of the operation result takes the unit of the first value
- If only one value has a unit between two values, the result of the operation will take that unit
Less files
@border: 5px +5;
// 若没有空格隔开
div{
width: 200px -50;
height: (200px + 5)*2;
border: @border solid red;
background-color: #666 - #222;
}
Compiled css style
div {
width: 200px -50;
height: 410px;
border: 5px 5 solid red;
/* border 的边没有变成10px */
background-color: #444444;
}
rem adaptation scheme
Adaptation target:
1. Let some elements that cannot be proportionally adapted to the current device when the device size changes.
2. Use media query to set the html font size in proportion to different devices, and then use rem as the size unit for page elements. When the html font size changes, the element size will also change, so as to achieve the adaptation of proportional scaling.
Technology use (market mainstream)
Technical Solution 1
- less
- Media query
- rem
Technical Solution 2
- flexible.js
- rem
to sum up:
1. Both options exist
2. Scheme 2 is simpler
Technical Solution One
1. Common size and width of design draft
Basically based on 750px
iPhone 4.5：640px
iPhone 678：750px
Android: Common 320px, 360px, 375px, 384px, 400px, 414px, 500px, 720px
2. Dynamically set html tag font-size size
(1) Assuming that the design draft is 750px
(2) Assuming that the screen is divided into 15 equal parts (division standards vary, 20 parts are possible)
(3) Each copy is used as the html font size, here is 50px
(4) When the 320px device is used, the font size is 320px/15, which is 21.33px
3. How to select element size
(1) Formula: rem value of page element = page element value (px) / (screen width / divided score)
(2) Screen width/number of divided copies is the size of html font-size
(3) Or: rem value of page element = page element value (px) / html font-size font size