Article Directory
One: rem
1: rem (root em) is a relative unit, similar to em,
em is the font size of the parent element.
The benchmark of rem is relative to the font size of the html element.
For example:
root element (html) set font-size=12px;
non-root element set width: 2rem;
then replaced by px means 24px.
[叽叽歪歪] Change
all the size units in the page to rem
, and set an appropriate html tag font size in the corresponding device width
Two: Media Query
@media can set different styles for different screen sizes.
Using @media query, you can define different styles for different media types.
/* 括号里的汉字仅做解释，与代码无关 */
@media mediatype（类型） and|not|only（关键字） (media feature)（媒体类型） {
CSS-Code;
}
2.1: Type
Divide different terminal devices into different types, called media types
| Attributes | description |
|---|---|
| all | For all devices |
| For printer and print preview | |
| scree | For computer screens, tablets, smart phones, etc. |
2.2: Keywords
Keywords connect media types or multiple media characteristics together as conditions for media queries.
| Attributes | description |
|---|---|
| and | Multiple media properties can be connected together, which is equivalent to "and". |
| not | Excluding a certain media type is equivalent to "not" and can be omitted. |
| onl | Specify a specific media type, which can be omitted. |
2.3: Media features
Add parentheses to include
| Attributes | description |
|---|---|
| width | Define the width of the visible area of the page in the output device |
| min-width | Define the minimum visible area width of the page in the output device, ≥, greater than or equal to |
| max-width | Define the maximum visible area width of the page in the output device, ≤, less than or equal to |
Three: rem+media query
The rem unit follows html. With rem page elements, different sizes can be set.
Media queries can be modified according to different device widths.
Media query + rem can achieve different device widths and dynamically change page element sizes.
- The
<html></html>... written inside @media screen ... - Introduce resources
grammar specifications
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
Four: use less (create a new file, suffix .less)
Less (abbreviation for Leaner Style Sheets) is a CSS extension language and also becomes a CSS preprocessor.
4.1: Less variables
@变量名:值;
Naming rules:
- Must be prefixed with @
- Cannot contain special characters
- Cannot start with a number
- Case Sensitive
4.2: Less compilation
Essentially, Less contains a set of custom grammars and a parser. Users define their own style rules based on these grammars. These rules
will eventually be compiled and generated by the parser to generate corresponding CSS files.
【叽叽歪歪】It means to create a .less file and write something in it. When saving, the software will automatically generate a .css file with the same name. (There is a plugin)
☇Easy LESS plugin.less
→.css(transfer)→.html(quote)
4.3: less nesting
The child element style is directly written into the father's {}
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 the parent element itself or a pseudo-class of the parent element.
- > Child generation son
- & Previous selector
- Direct nesting means offspring
4.4: Less operation
Any number, color or variable can participate in the calculation. That is, Less provides arithmetic operations for addition (+), subtraction (-), multiplication (*), and division (/).
- How to write multiplication sign (*) and division sign (/)
- There is a space in the middle of the operator
- 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