rem layout
Objective: the ratio of page layouts with text and change the screen size changes, the element height and width scaling.
rem units
- rem (root em) is a relative unit, similar to the em, em is the parent element font size. The difference is that rem reference is relative to the html element of the font size.
- For example, the root element (html) disposed font-size = 12px; non-root element is set width: 2rem; px is replaced by that represented 24px.
- rem advantages: the size of the parent element of the text may be inconsistent, but the entire page is only a html, well to control the element size of the entire page. By modifying the html in the text size can be the size of the overall control of all the elements of a page of text.
Media Inquiries
Media queries (Media Query) is the new CSS3 syntax.
- Use @media query, you can define different styles for different media types.
- @media can set up different styles for different screen sizes.
- When you reset the browser size of the process, the page will be re-render the page according to the width and height of the browser.
- Currently a lot for Apple phone, Android phone, tablet and other devices have been used for multimedia.
Syntax Specification
@media mediatype and|not|only (media feature){
CSS-Code;
}- mediatype query types
all: for all devices
print: for printers and print preview
screen: a computer screen, tablet PCs, smart phones, etc. - Keywords: media type or more media properties are connected together as a condition of media queries.
- and: a plurality of media characteristics may be connected together, corresponds to the "and" means.
- not: Excluding a media type, the equivalent of "non" means, can be omitted.
- only: to specify a particular media type, it can be omitted.
- The media characteristics: for each media type are particularly their different characteristics, different style of presentation provided according to different media types of media characteristics.
example:
@media screen and|not|only (max-width:800px){
CSS-Code;
}The introduction of resource
- When comparing range of styles, we can use different stylesheets (style sheets) for different media.
- Principle: determining the size of the device is in a direct link, and then refer to different css file.
- Syntax Specification:
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">- Judge recommended media queries from small to large
less foundation
Maintenance shortcomings of CSS
- CSS is a non-procedural language, no variables, functions, SCOPE (Scope) concepts.
- CSS need to write a lot of seemingly illogical code, CSS redundancy is relatively high.
- Convenient maintenance and expansion, is not conducive to reuse.
- CSS is no good computing power.
- Non-front-end development engineer is concerned, often because of lack of experience writing and CSS is difficult to write well-organized and easily maintainable CSS code project.
Less Introduction
Less (Leaner Style Sheets abbreviation) CSS is a language extension, has become a CSS preprocessor.
- As a form of an extension of CSS, it does not reduce the CSS function, but in the existing CSS syntax for adding CSS properties procedural language.
- It is the basis of CSS syntax above, the introduction of variables, Mixin (mixed), as well as operational functions and other functions, greatly simplifies the preparation of CSS, CSS and reduced maintenance costs, as its name puts it, Less It allows us to do more with less code.
less variable
Variables are not fixed values, may be altered
@ Variable name: value;
Variable naming convention
@ 1 must be prefixed
2. not contain special characters
3 can not begin with a number
4. The case-sensitive
Example:
@color: pink;
@font14: 14px;
body{
background-color: @color;
}
div{
color: @color;
}
a{
font-size: @font14;
}less compilation
We need to become less raw files compiled css files, html page so that we can use.
- With vscode plug in the Easy LESS files used to compile as less css file.
- This plugin will write less files automatically generate the corresponding css file save.
less nesting
Example (header> a):
.header{
width: 200px;
height: 100px;
background-color: blue;
a{
color: yellow;
}
}If you meet (intersection | pseudo-class | pseudo-element selectors)
- No ampersand front inner layer selector, it is parsed parent selector progeny;
- If there ampersand, it is parsed pseudo-class parent or the parent element of the element itself.
a{
&:hover{
color: yellowgreen;
}
&::before{
content: "";
}
}less operation
Any numbers, colors or variables can be involved in operations. Less is provided a plus (+), subtract (-), multiply (*), in addition to the arithmetic operation (/).
Note:
- Multiplication sign (*) and division (/) wording
- Intermediate operator must be separated by a space of about 1px + 5
- For the calculation, the calculation result between the two values of different units of a unit value takes a value of
- If there is only one value unit between two values, the result of the operation to take unit
@border: 5px + 5;
div{
width: 200px - 50;
height: 200px * 2;
border: 10rem / @border solid red;
background-color: #666 - #222;
}rem adaptation scheme
Adaptation target
- Some elements can not make geometric adaptation, to the time when the device size is changed, the proportional adaptation of the current equipment.
- Use media queries to set html proportional font size depending on the device, and then use the page elements do rem unit of measure, when html element size change the font size will change, so as to achieve geometric scaling of adaptation.
rem actual development adaptation scheme
- Scale design draft device width dynamically calculated and set the size of the font-size root html tags; (media queries)
- CSS, the draft design element width, height, and the relative position value, in accordance with the ratio in terms of equivalent units of value rem;
rem adaptation mainstream technology program
- less + Media Inquiries + rem
- flexible.js + rem (recommended)
Html tags dynamically set the size of the font-size
① design draft is assumed 750px
② Suppose we divide the screen is divided into 15 equal parts (divided parts 20 may be different standards may be 10 equal)
③ Each font size as html, here is 50px
④ then when the device 320px, font size 320/15 is 21.33px
⑤ with the size of our page elements divided by different font sizes will find their html or the same proportion
⑥ such as our 750 standard design draft
⑦ a 100 * 100 pixel screen page elements at 750, is 100/50 is converted to rem 2rem * 2 rem 1 to 1 ratio is
the screen ⑧ 320, html font size 21.33 2rem = 42.66px case width and but the high is 42.66 width and height ratio of 1 or more than 1
⑨ but has been able to achieve under different screen elements on the page box scaling effect
Value element size method
① is selected from a set of standard screen size (750)
font size = the screen size ② html / partitioning parts
③ page element value = rem (under 750px) page element values (px) / html font -size font size
rem values page or a page element = element value (PX) / (screen width / the divided parts)