04 - front end technology_ Mobile terminal adaptation

catalogue

1, Media query

1. Syntax:

2, rem

1. Principle:

2. Function:

3. Scheme:

4. Usage:

5. Syntax:

3, rem application

4, Practical application

1. UI design draft:

2. The value represented behind 1rem:

3. How to do it?  

5, less application

1. Installation

2. Variable

3. Nesting

4. Operation

6, Solution

1. Scheme 1: rem + media query + less scheme

2. Scheme 2 (recommended!!!): rem+flexible.js+less 

2.1 flexible.js introduction:

2.2 the value represented behind 1rem

2.3 steps!!!  

2.4 examples

3. Comparison of two schemes

1, Media query

Feel the change of the screen; Different styles can be obtained according to different screen widths, and then different style display can be realized;

  • 1. CSS3 new syntax is a process of querying the screen. By querying which range the current screen size belongs to, 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 preset, when the screen reaches the preset change range, the style I set in advance will take effect;

1. Syntax:

CSS Style:

/*
mediatype Query type: 
----------------- 
all All equipment 
print For printer and print preview 
screen Used for computer screen, tablet, smartphone, etc. 

Conditions: 
---- 
and And not satisfied, only satisfied 
media feature Query criteria: 
---------------------- 
width,min-with,max-width */
@media mediatype and|not|only (media feature) { 
	CSS-Code; 
}

Reference resources: (understand)

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

give an example:

Adaptation requirements:

Gear 1: W < 320 PX w < = 319 PX;  

Gear 2: W > = 320px and W < 640px;  

Gear 3: W > = 640px

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* Gear 1 W < 320 w < = 319 */
        @media screen and (max-width: 319px) {
            body {
                background: #000;
            }
        }

        /* Gear 2 W > 320 and < 640 */
        /* @media screen and (min-width: 320px) and (max-width: 639px) {
            body {
                background: blue;
            }
        } */
        /* The second method */
        @media screen and (min-width: 320px) {
            body {
                background: blue;
            }
        }

        /* Gear 3 W > 640 */
        @media screen and (min-width: 640px) {
            body {
                background: yellow;
            }
        }
    </style>
</head>

<body>

</body>

</html>

2, rem

1. Principle:

  • rem is a relative unit, similar to em
  • The difference is that the benchmark of rem is the font size relative to the html element, and em is the font size of the parent element.

2. Function:

  • Let some elements that cannot be proportionally adaptive, so that when the device size changes, it can be proportionally adapted to the current device.  

3. Scheme:

  • Use media query to set the font size of html in proportion according to different devices, and then use rem as the size unit of page elements. When the html font size changes, the element size will also change, so as to achieve the adaptation of proportional scaling.  

4. Usage:

  • rem unit, which can control the PX class related to all elements of the whole page; (width, height, padding, margin, top...) Control can be realized wherever you set the value;  
  • root: 1rem represents the font size of HTML;  

5. Syntax:

/* 1.The root html is 10px */ 
html { 
	font-size: 10px; 
}

/* 2.At this time, the width of div is 150px */ 
div {
	width: 15rem; 
}

Example: show the scaling effect by example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* rem Where is the syntax set */
        /* rem It's a unit. Now 1rem is 10px  */
        html {
            font-size: 10px;
        }

        div {
            width: 15rem;
            height: 15rem;
            background: #000;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

 

3, rem application

The core of rem layout: rem + media query;  

Media query: divide the screen into different gears and wait for changes;  

  • rem is used for all layout units. When the HTML font size changes, the unit elements using rem will change;  
  • rem + media queries add up: divide the screen and wait for changes; Change who? Change unique control 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: realize the scaling effect of different sizes and elements

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>

Summary of rem layout core:

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

4, Practical application

1. UI design draft:

For different sizes, the page should be scaled proportionally under different sizes

equipment Common width
iphone 4.5 640px
iphone 678 750px
Android

Common 320px 360px. 375px. 384px. 400px. 414px. 500px, 720px

Most 4.7-5-inch Android devices are 720px

Gear Division: Min width minimum boundary value;  

Agreement: divide various UI design drafts from small to large, and divide the current gear into starting point and starting point;

2. The value represented behind 1rem:

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

// The number of shares we defined this time is 10. In this process, we calculate how large 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; 
    } 
}

3. How to do it?  

The gear and basic settings are set as agreed;  

The drawing given by the UI has been obtained, and the px unit is marked on it;  

Objective: convert px units into rem units;  

How to do it: select the value behind rem of the current design draft in gear for calculation;  

  • How to convert the 540px width design draft to REM? Width = 540px = 540/54 rem;

 

5, less application

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

less: it is a CSS extension language, which extends the dynamic characteristics of CSS. CSS preprocessing language.  

Common CSS preprocessors: Sass, Less and Stylus.  

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

1. Installation

vscode plug-in installation:

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

  

2. Variable

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

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

Syntax:

//@Variable name: value; 
@bg:#333; 
.box_1 { 
	background-color: @bg; 
}
.box_2 { 
	background-color: @bg; 
}

Naming rules:

  • Must have @ as prefix
  • Cannot contain special characters ~ = +, cannot start with a number
  • Case sensitive

3. Nesting

Write less structure similar to HTML;  

Syntax:

/* css Writing method */ 
#header .logo { 
    width: 300px; 
}
/* less Writing method */ 
#header { 
    .logo { 
        width: 300px; 
    } 
}

Intersection | pseudo class | pseudo element selector, syntax

/* css Writing method */ 
a:hover{ 
    color:red; 
}
/* less Writing method */ 
a{
    &:hover{ 
        color:red; 
    } 
}

4. Operation

Any number, color or variable can participate in the operation.

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

Syntax:

// number 
width: 200px - 50; 
// colour 
background-color: #666 - #222; 
// Note: there is a space between the left and right of the operator, 1px * 5

Unit selection:

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

 

6, Solution

1. Scheme 1: rem + media query + less scheme

750px operation process:

Step 1:

  • Original realization: get the design draft first: 750px; All elements on the page are measured on the 750px design draft and implemented in code;  

Step 2:

  • Prepare rem under each gear: prepare the font size of HTML under each gear in advance;  
  • Get the rem of the current size: because I am now a 750px design draft, I can get the font size of HTML under the gear of 750px, that is, the 1rem value under the 750px design draft.  
  • Calculation scale: replace the PX value of all elements on the page with rem
  • Achieve the goal: when the screen changes, 1rem (basic block) will also change, which is naturally proportional scaling;

2. Scheme 2 (recommended!!!): rem+flexible.js+less 

The implementation principle of the previous scheme is the same. The overall elements of the page are changed by changing the size of 1rem (basic block);  

2.1 flexible.js introduction:

Simple and efficient mobile terminal adaptation library developed by mobile Taobao team; It has nothing to do with flex layout

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

Instead of setting font size through CSS media query, setting font size through JS has the effect that if the screen changes a little, there will be a rem recalculation;

2.2 the value represented behind 1rem

  • Divided into 10 copies;  
  • Set on HTML tag;
function setRem () { 
// docEl.clientWidth JS gets the width of the current screen 
// Divide by 10 to get the foundation block 
    var rem = docEl.clientWidth / 10; 
    docEl.style.fontSize = rem + 'px' 
}

2.3 steps!!!  

If the design is 430px

Get the UI design draft and realize the original; All elements on the page are measured on the design draft and implemented in code; (streaming, flex) as long as the UI is marked on the drawing, it is written; Implement all of them first and replace them later;  

  • Where to write? less file
  • You need to import the generated css file into index html;  

Design draft width / 10:1rem=43px;  

Unified replacement: 100px=100/43rem;

2.4 examples

06.less

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

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.5px 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))

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>

3. Comparison of two schemes

Same:

  • Font size is controlled and 1rem (basic block) changes to achieve equal ratio effect;  

Different:

  • REM + media query + less: set different 1rem values by setting different gears; The effect is stepwise change;  
  • flexible.js+rem: set different 1rem values through js, and the effect is continuous change; This looks more coherent and fits any screen.

Posted by San_John on Tue, 03 May 2022 02:05:50 +0300