Less basic layout and adaptation rem - Study Notes

A, rem foundation

rem (root em) is a relative unit, similar to the em, em is the font size of the parent element.
The difference is that rem reference is relative to the font size of the html element.
rem advantages: the size of the parent element of the text may be inconsistent, but the entire page is only a html, well controlled yuan entire page
voxel size.

/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}

Second, media queries

Media queries (Media Query) is the new CSS3 syntax.
@media can set up different styles for different screen sizes.
Syntax Specification:

• Note the @ symbol with the beginning of the @media
• mediatype media types
• Keyword and not only
• media feature media properties must include parentheses

@media mediatype and|not|only (media feature) {
CSS-Code;


/*----例如----*/
@media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }

• Media properties

value	explain
width	Output device defined page width visible region
min-width	Output device defined page width minimum visible region
width	Define the maximum page output device visible region width

Note: To prevent confusion, we want media queries in ascending or descending order to write, but our favorite thing to write small to large, so that the code is more concise

• The introduction of resource (understand)
  when comparing variety of styles, we can use different media for different stylesheets (style sheets).
  Principle, is a direct link in the size of the apparatus is determined, and then refer to different css file.

/*1. 语法规范*/
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
/*2. 示例*/
  /* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */
    <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

Three, Less basis

3.1 Maintenance drawbacks 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

Introduction 3.2 Less
Less (Leaner Style Sheets abbreviation) CSS is a language extension, has become a CSS preprocessor.
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 Chinese Website: http://lesscss.cn/
common CSS preprocessor: Sass, Less, Stylus

3.3Less installation
① install nodejs, select the version (8.0), URL: HTTP: //nodejs.cn/download/
② check whether the installation was successful, use the cmd command (win10 is run to open the window + r Enter cmd) - Enter the "node -v "to view the version
③ based nodejs online installation less, use the cmd command" npm install -g less "to
④ check whether the installation is successful, use the cmd command" lessc -v "to view the version
3.4Less use

• Less compiler
  need to install some plug-ins, so that as long as the save look Less files are automatically generated CSS file.
  Plug an example to vocode Less
  Easy LESS plug-in is used to compile the file less
  css file
• Less variable
  variables are not fixed values, can be changed. Because some colors and values such as our CSS in regular use.
  @ Variable name: value;

// 定义一个粉色的变量
@color: pink;  
@font14: 14px;
// 错误的变量名  @1color   @color~@#
// 变量名区分大小写  @color  和  @Color 是两个不同的变量
// 定义了一个 字体为14像素的变量

div {
    color: @color;
    font-size: @font14;
}

• Less nesting

.header {
    // 1. less嵌套 子元素的样式直接写到父元素里面就好了
    a {
        color: red;
        // 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
        &:hover {
            color: blue;
        }
}

• Less computing
  any numbers, colors or variables can be involved in operations. Less is provided a plus (+), subtract (-), multiply (*), in addition to the arithmetic operation (/). Operators have intermediate spaces separated by about 1px + 5.

@baseFont: 50px;
@border: 5px + 5;
div {
    width: 200px - 50;
    height: (200px + 50px ) * 2;
    background-color: #666 - #222;
}
img {
    width: 82rem / @baseFont;
    height: 82rem / @baseFont;
}
// 1. 我们运算符的左右两侧必须敲一个空格隔开
// 2. 两个数参与运算  如果只有一个数有单位，则最后的结果就以这个单位为准
// 3. 两个数参与运算，如果2个数都有单位，而且不一样的单位 最后的结果以第一个单位为准

Four, rem adaptation scheme

4.1 rem actual development adaptation scheme
① to the width of the device design draft ratio, dynamically calculated and set the root html tag size font-size; (media queries)
② the CSS, the width, height, relative positions and other elements take the design draft value, according to the value equal to rem scaling units;

4.2 rem adaptation program of technical use (mainstream)
technology Scenario 1

• less
• Media Inquiries
• rem

Technical Scheme 2 (recommended)

• flexible.js
• rem

4.3 Technical Program 1 (less, media queries, rem)

• Element size value method

Last ① formula: = rem value of page elements of a page element values (PX) / (screen width / division parts)
② screen width / division parts html font-size is the size of
③ or: page element value rem page element value = (px) / html font-size font size

• Set up a public file common.less
  New common.less set up the most common screen size, the use of html media queries to set different font sizes.
  // import the file in index.less in common.less

@import “common”

• body style

body {
min-width: 320px;
width:15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}

4.4 Technical Program 2 (flexible.js, rem recommended)

• Download flexible.js
  GitHub address: https: //github.com/amfe/lib-flexible

• Set the viewport label and style as well as the introduction of initialization js file, the introduction of this js file

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

/*在 index.html 中 引入 flexible.js 这个文件*/
<script src=“js/flexible.js”> </script>

• body style

body {
min-width: 320px;
width:10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}

/* 如果我们的屏幕超过了 750px  那么我们就按照 750设计稿来走 不会让我们页面超过750px */
@media screen and (min-width: 750px) {
    html {
        font-size: 75px!important;
    }
}

• Installation px rem conversion plug cssrem, facilitate the development of