rem layout, less based on media queries

rem units

rem (root em) is a relative unit, similar to the em, em is the font size of the parent element;

Rem is different with respect to the font size of the reference element html;

For example, the root element (html) disposed font-size: 12px; non-root element is set width: 2rem; px case represented in terms 24px;

rem advantage: that is, the page size can be changed by modifying the html element can overall control inside the text size;

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;

@media mediatype and|not|only (media feature) {
  css-code;
}
/* 
  @media：关键字；
  mediatype：媒体类型；
  and|not|only：关键字；
  media feature：媒体特性 必须有小括号包含
*/

mediatype query type

The different terminal devices are divided into different types, referred to as media type

value	explain
all	For all devices
print	For printers and print preview
scree	For computer screens, tablet PCs, mobile phones only

Keyword

Keywords media types or more media properties linked to the condition together as media queries

• and: they may be connected together in a plurality of media properties, and equivalent means;
• not: excluding a media characteristic, corresponding to the non means may be omitted;
• only: specify a media type characteristics may be omitted;

Media properties

Each media type has its own different attributes, set a different display styles according to different media types of media properties, pay attention to add parentheses

value	explain
width	Output devices visible region defined page width
min-width	Output apparatus defined page width minimum visible region
max-width	Define the maximum visible area of ​​the output device page width

Examples

/* 建议从小往大开始写 */
@media screen and (max-width: 539px) {
  body {
    background-color: pink;
  }
}
/* 这里最后一个条件可以去掉，为了演示多个写法故而加上 */
@media screen and (min-width: 540px) and (max-width: 7990px) {
  body {
    background-color: hotpink;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: plum;
  }
}

The introduction of resource

When comparing range of styles, we can use different stylesheets (style sheets) for different media;

Principle: a link tag is directly determined in the device size, then introduce different css file; recommendations ascending writing;

<link rel="stylesheet" href="./width320.css" media="screen and (min-width: 320px)" />
<link rel="stylesheet" href="./width640.css" media="screeb and (min0-width: 640px)" />

less foundation

less Introduction

Less (Leaner Style Sheets Abbreviation) css is an extended language, also known as css preprocessor;

Css as a form of development, it did not reduce css function, but in the existing syntax for adding css procedural language features;

It css syntax based on the introduction of a variable, Mixin (mixed), and calculation functions, etc., greatly simplifies the preparation of css, and reduced maintenance costs of css;

Less Chinese Network: http: //lesscss.cn/

Common css preprocessor: Less, Sass, Stylus

less installation

• Installation node.js
• npm install -g less
• lessc -v check less version

less compilation

.less file can not be identified html, recommended here a vscode plug easy Less, this plugin can be less css files compiled into a document

less variable

// @变量名: 值;
// 上面引用，下面调用，开头必须是@
@color: pink;
body {
  background-color: @color;
}

less nesting

1. Style of writing directly to the child elements inside the parent element

   .nav {
     .logo {
       color: pink;
     }
   }

2. Pseudo-class, the intersection of the selector, the selector pseudo-element, the inner front selector to &

   a {
     &:hover {
       content: "";  
     }
   }

less operation

@border: 5px + 1;
body {
  width: 200px - 50;
  height: 200px * 0.5;
  // 如果前后运算的值都存在单位，那么以第一个为准
  border: (@border + 1) / 7 + 1rem;
}

rem adaptation scheme

1, so that some elements of the adaptive proportional not, when the time reaches the size of the apparatus is changed, the current proportional adaptation device

2, using html media queries to set the font size to scale depending on the device, and then use the page elements do rem unit of measure, when the font size changes html, element size changes will follow, so as to achieve the effect of geometric scaling;

The actual development adaptation scheme

1, the device according to the ratio of the width of the draft design, dynamically calculated and set the size of the font-size root html tags; (media queries)

2, css, the draft design element width, height, and the relative position value, according to the value equal to rem scaling units;

Html tags dynamically set the size of the font-size

1, assuming a design draft 750px

2, suppose we put the whole screen is divided into 15 equal parts (can be 20 can also be a 10)

3, as every html font size is 50px here

4, then the time 320px set the font size is 320/15 is 21.33px

5, with the size of our html element divided by different font sizes will find their proportion is still the same

6, such as in the design draft standard 750, box 100 is a 100 * rem is converted to 100/50 2rem * 2rem; 320 screen, html font size is 21.33 2rem = 42.66px case width and height or scaling; but it has been achieved under different screen, scaling elements box

Method element size values

1, the final equation: rem page elements of the page value = (PX) / (screen width / the divided parts)

2, the screen width / division parts html font-size is the size of

rem 3, a page or a page element = element value / html font-size Size