How to realize adaptive layout

Other articles refer to ：

flexible.js Detailed layout - Front end development blog

rem How to achieve adaptive layout ？- Front end development blog

Mobile adaptive solution - Front end development blog

Mobile terminal layout

One 、 Layout concept

1. Static layout

Use it directly px As a unit

2. Fluid layout

Width use % percentage , High usage px As a unit

3. Adaptive layout

Create multiple static layouts , Each static layout corresponds to a screen resolution range . Use @media Media query to switch multiple layouts

4. Responsive layout

It's usually a combination of streaming layout + Elastic layout , Use with media query technology

5. Elastic layout

Usually it means rem or em Layout .rem Is relative to html Elemental font-size In terms of size , and em It's relative to its parent element ( Not font-size Is relative to itself font-size)

Two 、 Basic concepts

1. Physical pixel (physical pixel)

Physical pixels are also called device pixels , It's one of the smallest physical components of a display device . Each pixel can set its own color and brightness according to the operating system . It's the tiny distance between the pixels of these devices that deceives the image effect we see with the naked eye .

2. Device independent pixel (density-independent pixel)

Device independent pixels are also called density independent pixels , It can be considered as a point in the computer coordinate system , This point represents a virtual element that can be used by the program ( for instance CSS Pixels ), And then it's transformed into physical pixels by related systems .

3. CSS Pixels

CSS Pixel is a unit of the image , Mainly used in browsers , Used to measure accuracy Web What's on the page . In general ,CSS Pixels are called device independent pixels (device-independent pixel), abbreviation DIPs.

4. Screen density

Screen density is the number of pixels present on the surface of a device , It is usually calculated in pixels per inch (PPI).

5. Screen size calculation

windows Next ,96 Pixels / Inch , Mac Next ,72 Pixels / Inch 1366*7681366/96 = 14.23in768/96 = 8in

The screen size : 14.23 ride 14.23+8 ride 8, Then open the root

6. Device pixel ratio (device pixel ratio)

The device pixel ratio is abbreviated as dpr, It defines the corresponding relationship between physical pixels and device independent pixels . Its value can be calculated as follows :

Device pixel ratio = Physical pixel / Device independent pixel

stay Javascript in , Can pass window.devicePixelRatio Get the... Of the current device dpr. stay css in , Can pass -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio Make media inquiries , To be different dpr The equipment , Make some style adaptations .

7. Bitmap pixels

A bitmap pixel is a raster image ( Such as :png, jpg, gif etc. ) The smallest data unit . Each bitmap pixel contains its own display information ( Such as : Display position , Color value , Transparency, etc. ). Theoretically ,1 Bitmap pixels correspond to 1 Individual physical pixels , Pictures can be displayed perfectly and clearly

8. window viewport

Simple understanding ,viewport Is strictly equivalent to the browser's window . In a desktop browser ,viewport Is the width and height of the browser window .

In the development of mobile page , We can set meta Labeled viewport scale To define the size of the window

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

9. rem Company

• em: With the parent element font-size To calculate , As of the parent element font-size: 16px ; 1em =16px
• rem: Relative to the root element html Labeled font-size To do the calculation , Such as html Of font-size:16px; 1rem = 16px

10.rem How to implement adaptive devices

Actual element / Design elements == Actual page / Designed pages

         So-called " Design " Is what we write code to expect the web page to look like , The size and position of all elements are exactly the same as we expected . What is usually presented on the computer side is the same as the design , But the mobile terminal has a smaller screen than the computer terminal , The appearance will be different , Dislocation occurs from time to time , That's why you need to adapt .

         If the above equation holds , Then the adaptation is successful . Actual element == Design elements * ( Actual page / Designed pages ), That means you need to know ( Actual page / Designed pages ), Set to k. Just imagine , If css There is an attribute in that can know this ratio k, Then the adaptation problem has been solved perfectly . unfortunately , There is no such property . however , Fortunately, ,rem It can serve as a bridge between us and this proportion ,rem It can be regarded as a unit , It can be associated with the text size of the root element , That is to say, put html Of font-size Set to k, For example, the screen size of the device is 300px, The width of the design draft is 00px, be html The font size of 320/640 = 0.5px, you 're right , This value is usually very small , however font-size The value of is generally in 10px above , although html Inside font-size It will be set below font-size Covered with , But out of habit , Still will this k Multiply the value by a factor , It's usually 100.       

         such , We found the same thing on the page , We can respond to all changes with constancy . thus , The size of all elements on the page can be used rem, Or ratio k To express .

Calculate according to different screen sizes html Medium font-size size :

<script>
(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function () {
      var clientWidth = docEl.clientWidth;

      if (!clientWidth) return;

      if (clientWidth >= 640) {
        docEl.style.fontSize = "100px";
      } else {
        docEl.style.fontSize = 100 * (clientWidth / 640) + "px";
      }
    };

  if (!doc.addEventListener) return;

  win.addEventListener(resizeEvt, recalc, false);

  doc.addEventListener(
    "DOMContentLoaded",
    recalc,

    false
  );
})(document, window);
</script>

// The main idea of the above code is : If the width of the page exceeds 640px, Then in the page html Of

font-size Constant for the 100px, otherwise , On the page html Of font-size The size is : 100 *( Current page width / 640)

The formula for calculating the size in the page : Actual size (rem) = Measured size (px)/html Of font-size size (px)

11. Windows unit

vw : 1vw Equal to the width of the window 1%

vh : 1vh Equal to the window height 1%

vmin : selection vw and vh The smallest one

vmax : selection vw and vh The biggest one