As far as it is concerned, the screen adaptation of web runs through the whole front-end industry, such as the common PC end, mobile end, responsive, small program and so on.

PC

The characteristics of

The PC screen has the following features:

  1. The screen size is generally greater than13.3 in.
  2. Users often drag and drop browser sizes

why

Just because the browser size on a PC is constantly changing, and the range of changes is large, users will use the full screen browser, users will also reduce the browser to a very small value, such as around 600px. So if you use streaming layout (percentage layout) on PC, the page will look ugly.

To solve

Therefore, on the PC side, the only way to solve this problem is through layout.

  • When the screen is larger than the width of the center, the center display
  • A horizontal scroll bar appears when the screen is smaller than the width of the screen center, a scheme used by almost all PC websites.

case

code

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> </title> * {margin: 0; padding: 0; box-sizing: border-box; } html,body{ height: 100%; background-color: #ccc; } main{ width: 1200px; height: 100%; margin: 0 auto; font-size: 40px; background-color: pink; } header{ height: 80px; background-color: aqua; } </style> </head> <body> <main> <header> Type </header> <section> Content </section> </main> </body> </ HTML > Copy codeCopy the code

The effect

The mobile terminal

The characteristics of

The screen on the mobile terminal has the following features:

  • The screen is smaller than on a PC
  • The browser is not PC side, at any time a variety of resizing

why

Because the screen on the mobile end is smaller than that on the PC end, and you can’t drag the browser to adjust the size, the layout on the mobile end is mostly streaming layout, which has some small branches, such as fixed small type center.

To solve

Streaming layout, also known as percentage layout, refers to the fact that the width of most containers and elements on a page is not fixed, either in percentage units or rem units

case

code

For normal images and containers, use percentages or Flex when writing units.

For certain elements of the page, such as font size, taobao Flexibile + REM solution can be used

Taobao flexible

Plain streaming layout

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> stream </title> <meta name="viewport" Word-wrap: break-word! Important; "> < span style> * {margin: 1em; 0; padding: 0; box-sizing: border-box; } body { background-color: #ccc; } ul { list-style: none; display: flex; height: 100px; } li { flex: 1; border: 1px solid #000; background-color: aqua; } </style> </head> <body> <main> <section> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> </main> </body> </ HTML > Copy the codeCopy the code

The effect

Taobao Flexible + REM

Flexible and Flex layouts are irrelevant. Wives and wifecakes are irrelevant

This solution can be used with the above streaming layout, and REM is mainly for the font implementation to change as the screen changes

  1. Rem CSS unit, relative length, whose value is equal to the font size of the root tag such as

    <style> html { font-size: 100px; } div {/* relative to 100px */ font-size: 1rem; } </style> <div> REM unit </div> copy codeCopy the code

    The effect

  2. Taobao flexible

    1. Is a mobile terminal REM set js library
    2. Changed the font size of the root label to one-tenth the size of the current screen
    3. The font size of the root tag changes, as do elements that use REM units or font sizes

process

Flexible code

<! DOCTYPE HTML < HTML lang="en"> <head> <meta charset="UTF-8"> <title> <meta name="viewport" content="width=device-width, Initial - scale = 1.0, the maximum - scale = 1, minimum - scale = 1, the user - scalable = no "> < script > (the function of flexible (window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit(); }}); 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); </script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } </style> </head> <body> <div> </div> <script> window.onload = function () { setFont(); window.addEventListener("resize", function () { setFont(); }) function setFont() { var div = document.querySelector("div"); div.style.fontSize = document.querySelector("html").style.fontSize; Div. InnerHTML = "HTML fontSize is" + document.queryselector (" HTML ").style.fontsize; }} </script> </body> </ HTML > Copy the codeCopy the code

Flexible effect

Combine Flexible and REM

According to the above characteristics

  • flexible 把 Root label font sizeMake it 1/10 of the screen
  • remThis can change depending on the font size of the root tag

The following solutions are obtained

  1. Assume the design is 640px wide

  2. The font size of the root tag is 64px, which means 1 rem = 64px => 1px=1/64rem

  3. The original design had a div size of 100px and a font size of 100px

  4. Change the px units to REM units

    div{ width:100px; font-size:100px; } change to div{width:calc(100rem / 64); font-size:calc( 100rem / 64 ); } Duplicate codeCopy the code

  5. Also abstract out the width of the design

    Div {width:calc(100rem / 1/10th of the design width); Font-size :calc(100rem / 1/10th width of the design draft); } Duplicate codeCopy the code

The complete code

<! DOCTYPE HTML < HTML lang="en"> <head> <meta charset="UTF-8"> <title> <meta name="viewport" content="width=device-width, Initial - scale = 1.0, the maximum - scale = 1, minimum - scale = 1, the user - scalable = no "> < script > (the function of flexible (window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit(); }}); 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); </script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } div { width: calc(100rem / 64); height: calc(100rem / 64); font-size: calc(100rem / 64); background-color: aqua; } </style> </head> <body> <div> </div> <script> window.onload = function () { setFont(); window.addEventListener("resize", function () { setFont(); }) function setFont() { var div = document.querySelector("div"); div.style.fontSize = document.querySelector("html").style.fontSize; Div. InnerHTML = "HTML fontSize is" + document.queryselector (" HTML ").style.fontsize; }} </script> </body> </ HTML > Copy the codeCopy the code

The final result

Small type area

The practice of small plate core is also a type of streaming layout, but the outermost container with a maximum width setting such as

main{ max-width:540px; } Duplicate codeCopy the code

reference

The small program end

The applets can understand the special mobile terminal, but instead of rem, the applets have RPX, which translates as responsive pixels and functions like REM

The characteristics of

There is no need to introduce Taobao Flexible as the built-in RPX unit implements REM + Fleixible.

In the applet, there is a uniform screen width of 750 RPX so: there is the following relationship.

The width of the screen Conversion relations PX and RPX
750 px 1 px = 1 rpx
375 px 1px = 2 rpx
any px 1 px = any / 750 rpx

code

For example, if the design is 375px, there is a view with a width and height of 100px and a font size of 100px

view { width: 200rpx; height: 200rpx; font-size: 200rpx; background-color: aqua; } <view> applet RPX </view> copy the codeCopy the code

Vw and vh

On the mobile side, there are also the following units, which are also very useful and can be very convenient to solve problems.

unit The name of the
vw 100vw is equal to the width of the viewport
vh 100vh equals the height of the viewport
vMax The bigger one between VW and VH
vMin The smaller of VW and VH

The above units are supported either on mobile or in applets.

The design is 375px, there is a div with a size of 100px, and the font size is 100px.

  1. 375px = 100 vwthen1 px = 100vw / 375
  2. so100px = 100vw * 100 / 375;

code

Notice that calc is a very strict syntax especially for Spaces

main { background-color: pink; width: calc(100vw * 100 / 375); height: calc(100vw * 100 / 375); font-size: calc(100vw * 100 / 375); } Duplicate codeCopy the code

Responsive layout

The concept of responsiveness falls into two broad categories

  1. One is back-end responsiveness
  2. One is front-end responsiveness

Back-end responsiveness

The background server determines whether the source request is PC or mobile based on the user-Agent of the front-end browser. Then the server dynamically returns to the PC page or mobile page. This feature is easy to find in Nginx. Jingdong, Tmall, Taobao are also like this.

Front-end response

Mainly refers to through the media query to achieve.

Write a set of code HTML + CSS + javascript, you can winter according to the width of the screen to change the style of the page

It’s not the best experience, but it’s the smallest code that works on both PC and mobile. Generally, the page requirements are not high or small business use.

Because also compatible to the PC side, so generally do responsive pages will not use too advanced H5 CSS3 technology.

case

Such as the realization of a large screen under the next line display 3 columns, small screen under the next line display 2 columns.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>Document</title> <style> * {margin: 0; padding: 0; box-sizing: border-box; } ul { overflow: hidden; } li { float: left; height: 100px; border: 1px solid #000; background-color: pink; } / / @media screen and (min-width:800px) {li {width: 33.33%; }} / / @media screen and (max-width:800px) {li {width: 50%; background-color: lawngreen; } } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </ HTML > Copy the codeCopy the code

The effect

other

When implementing a responsive layout, twitter’s Bootstrap framework is used to great acclaim and is compatible with IE8.