First, media inquiries

Feel the changes on the screen; You can obtain different styles according to the width of the screen, and then achieve different styles of display;

  • 1. CSS3 new syntax, is a process of querying the screen, by querying the current screen size belongs to which range, so that the style of which range is effective;
  • 2. Feel the change of the screen, the change of the screen is the change of the width. Through the pre-setting, when the screen reaches the range of the change I have pre-set, the style I set in advance will take effect;

1. Grammar:

CSS styles:

/* Mediatype query type: ----------------- all All devices print for printers and print preview Screen for computer screens, tablets, smartphones, etc. Conditions: ---- and not only only meets the media feature query conditions: ---------------------- width,min-with,max-width */ @media mediatype and|not|only (media feature) { CSS-Code; }Copy the code

Reference resources :(understand)

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
Copy the code

For example:

Adaptation requirements:

Tap 1: w<320 px w< = 319 px;

Stickline (w>=320px and w< 640px;

Rank 3: w > = 640 px

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> < span style> 319px) { body { background: #000; }} /* @media screen and (min-width: 320px) and (max-width: 639px) {body {background: blue; }} */ /* / @media screen and (min-width: 320px) {body {background: blue; }} @media screen and (min-width: 640px) {body {background: yellow; } } </style> </head> <body> </body> </html>Copy the code

Second, rem

1. Principle:

  • Rem is a relative unit, like EM,
  • The difference is that REM is based on the font size relative to HTML elements, while EM is the parent element font size.

2. Functions:

  • Make some elements that are not equally adaptive, so that when the size of the device changes, it is equally adaptive to the current device.

3. Scheme:

  • Media query is used to set the font size of HTML in proportion to different devices, and then REM is used as the size unit for page elements. When the size of THE HTML font changes, the element size will also change, so as to achieve the adaptation of proportional scaling.

4. Usage:

  • Rem units that control all elements of the page related to the PX class; (Width, height, padding, margin, top…) You can control it anywhere you set the value;
  • Root: 1rem represents the font size of HTML;

5. Grammar:

/* 1. The root HTML is 10px */ HTML {font-size: 10px; } /* the width of the div is 150px */ div {width: 15rem; }Copy the code

Examples: Show scaling effects with examples

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> <title>Document</title> <style>  10px; } div { width: 15rem; height: 15rem; background: #000; } </style> </head> <body> <div></div> </body> </html>Copy the code

Third, REM application

The core of REM layout: REM + media query;

Media query: divide the screen into different stalls, waiting for changes;

  • The layout uses REM for all units. When the HTML font size changes, the rem unit element changes.

  • Rem + media queries add together: divide the screen and wait for changes; Who change? Change only controls REM (HTML font size)

    @media screen and (min-width: 320px) { html { font-size: 20px; } } @media screen and (min-width: 640px) { html { font-size: 40px; } } div { width:1rem; height:1rem; }

Example: to achieve different sizes, elements of the zoom effect

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> @media screen and (min-width: 320px) {HTML {font-size: 20px; } } @media screen and (min-width: 640px) { html { font-size: 40px; } } div { width: 1rem; height: 1rem; background: #000; } </style> </head> <body> <div></div> </body> </html>Copy the code

Summary of CORE REM layout:

  • Media query: when the screen reaches different ranges, the HTML font size will have different values.
  • The px value behind 1rem = the size represented by the HTML font size of the current stall
  • Then the elements using REM units will change by equal proportions;

Fourth, practical application

1. UI Design Draft:

Different sizes, pages in different sizes scale equally

equipment

Common width

The iphone 4.5

640px

iphone 678

750px

Android

320px.360px. 375px. 384px. 400px. 414px. 500px and 720px

Most 4.7-5 inch Android devices measure 720 pixels

Gear division: min-width minimum value;

Agreement: the UI design draft, from small to large, the current position of our starting point, starting point;

The values behind 2,1 rem:

Here, we agree to set the HTML font size: according to the minimum value of each stall, divide the same number of copies, get the HTML font size of the current stall;

// This process calculates how big a REM is in different gears; @media screen and (min-width: 320px) { html { font-size: 32px; } } @media screen and (min-width: 360px) { html { font-size: 36px; } } @media screen and (min-width: 540px) { html { font-size: 54px; }}Copy the code

3. How to do it?

Tap and base Settings are set according to the convention;

We have got the picture given by UI. It is marked with PX units.

Goal: Convert PX units to REM units;

How to do it: Select the value represented behind THE REM of the current design draft under the stall position for calculation;

  • How to convert REM if you are given a 540px design, width =540px = 540/54 rem;

Five, less application

Less: Lets you write less code to achieve the same effect;

Less: is a CSS extension language that extends the dynamic features of CSS. CSS preprocessor speech.

Common CSS preprocessors: Sass, Less, and Stylus.

Less: Lesscss.cn /

1, the installation

Install vscode plug-in:

  • Search Easy LESS
  • After installing the plug-in, reload vscode.
  • Test: Save the.less file and the.css file will be generated automatically

​ ​

​

2, the variable

A variable is something that has no fixed value and can be changed.

Some of the colors and values in our CSS are often used and can be set as variables;

Grammar:

// @variable name: value; @bg:#333; .box_1 { background-color: @bg; } .box_2 { background-color: @bg; }Copy the code

Naming rules:

  • Must be prefixed with @
  • The value cannot contain special characters ~=+ or start with a digit
  • Case sensitive; .

3, nested

Write less like HTML;

Grammar:

/* CSS */ # header. logo {width: 300px; } / / #header {.logo {width: 300px; }}Copy the code

Intersection | | pseudo class pseudo element selectors, syntax

/* a:hover{color:red; } /* less */ a{&:hover{color:red; }}Copy the code

4, operation

Any number, color, or variable can be used.

Less provides arithmetic operations of addition (+), subtraction (-), multiplication (*), and division (/).

Grammar:

// width: 200px-50; // background-color: #666 - #222; // Note that the 1px * 5 operator is separated by a spaceCopy the code

Unit selection:

  • If only one value between two values has a unit, the result of the operation takes that unit
  • For an operation between the values of two different units, the resulting value takes the units of the first value

Sixth, solutions

1. Scheme 1: REM + media query + LESS scheme

750px Operation process:

The first step:

  • Original implementation: get the design draft first :750px; All elements on the page, measured on the 750px design draft, code implementation;

The second step:

  • Prepare rem in each stall: prepare the font size of HTML in each stall in advance;
  • Get the rem of the current size: since I am currently using a 750px design, I can get the font size of the HTML at the 750px position, which is the 1rem value of the 750px design.
  • Calculate the scale: replace the PX values of all the elements on the page with REM values
  • Achieve the goal: then, when the screen changes, 1rem(base block) will also change, naturally is equal scale;

2, Plan 2 (recommended!!) Rem + flexible. Js + less

The principle of the previous scheme is the same, the whole element of the page is changed by changing the size of 1REM (base block).

2.1 Flexible. Js Introduction:

Mobile taobao team out of the simple and efficient mobile end adaptation library; Has nothing to do with the Flex layout

Github address: github.com/amfe/lib-fl…

Instead of setting font size by CSS media query, set font size by JS. The effect is that the screen changes a little and there is a REM recalculation.

2.2 The value behind 1REM

  • Divided into 10 parts;

  • Set on an HTML tag;

    Var rem = docel.clientWidth / 10; var rem = docel.clientWidth / 10; docEl.style.fontSize = rem + ‘px’ }

2.3 Steps!!

Let’s say the design is 430px

Get the UI design draft, the original implementation; All elements on the page, measured on the design draft, code implementation; (Streaming, Flex) As long as the UI has a label on the graph, it is written; First all out, unified replacement for a while;

  • Where do I write it? Less file
  • You need to import the generated CSS file into index.html.

Design width /10:1rem=43px;

Unified substitution: 100px=100/43rem;

For example, 2.4

06.less

div {
    width: 100/43rem;
    height: 100/43rem;
    background: #000;
}
Copy the code

flexible.js

(function flexible(window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize() { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // 750 100px 100rem / 75 // set 1rem = viewWidth / 10 function setRemUnit() { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', Function (e) {if (e.persisted) {setRemUnit()}}) // detect 0.px supports if (DPR >= 2) {var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } }(window, document))Copy the code

demo.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Document</title> <script SRC ="./flexible. Js "></script> <link rel="stylesheet" href="./06.css"> </head> <body> <div></div> </body> </html>Copy the code

3. Comparison of the two schemes

The same:

  • Font size control, 1REM (base block) change, achieve equal ratio effect;

Different:

  • Rem + media query +less: set different 1REM values by setting different stalls; The effect is a step change;
  • Flexible. Js + REM: Set different 1rem values through JS, the effect is continuous change; This looks more consistent and fits on any screen.

The chapters are summarized here (the better we understand you guys ~ 3 ~), the better we understand you guys.

Students who are interested in learning Java are welcome to join QQ Learning exchange group: 1126298731

Have a question welcome to ask, everyone together in learning Java on the road to play strange upgrade! (O ゜ – ゜▽゜)

​