Developing a mobile-side page

One, pixel-what is a pixel

In the field of Web front-end development, pixels have the following two-layer meanings:

1. Device pixels: The physical pixels of the device screen, and the number of physical pixels is fixed for any device.

2. CSS pixels: This is an abstract pixel concept that is created for Web developers.

Summarize

1. Web front-end domain, pixels divided into device pixels and css pixels

2. The size of a CSS pixel is variable, such as when the page is scaled, in effect, the CSS pixels are scaled down or enlarged, and the device pixels are constant regardless of size or quantity.

Ii. three viewports on the mobile side

Layout viewports: The base viewport of the mobile CSS layout, which is the CSS layout, is calculated based on the layout viewport.

The width and height of the layout viewport can be obtained from the following JavaScript code:

1. document.documentElement.clientWidth

2. document.documentElement.clientHeight

Second viewport: visual viewport

The part that can be seen is the visual viewport.

Third viewport: Ideal viewport

Ideal viewport, this is our most need to focus on the viewport, now let's review what we know the viewport, there are two, respectively: layout viewport, visual viewport.

Mobile browser to set the layout viewport as the ideal viewport:

1. <meta name="viewport" content="width=device-width" />

The above code tells the browser: set the width of the layout viewport to the ideal viewport.

Three viewports on the mobile end, let's summarize:

1. On the PC side, the layout viewport is the browser window

2. On the mobile side, the viewport is divided into two: a layout viewport, a visual viewport.

3. The mobile side also has an ideal viewport, which is the ideal size for the layout viewport, which is the ideal layout viewport. (Note: The size of the ideal viewport varies by device and browser, but it doesn't matter to us)

4. You can set the width of the layout viewport to the ideal viewport

three, the device pixel ratio (DPR)

1. 设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)

1. The ideal viewport for IPhone5 is: 320*568 <==> device-width = 320,device-height = 568

2. IPhone5 Device pixel ratio: 2

Device pixel ratio (DPR) = number of device pixels/number of ideal viewport css pixels (device-width)

Zoom: Zoom Out is the CSS pixel.

The main purpose of the Meta viewport label is to match the width of the layout viewport and the ideal viewport

A total of 5:

1. Width: Sets the width of the layout viewport

2. Init-scale: Set the initial zoom level of the page

3. Minimum-scale: Set the minimum page zoom level

4. Maximum-scale: Sets the maximum zoom level of the page

5. User-scalable: Whether the user is allowed to scale the page

Media queries are the basis of responsive design, and he has the following three-point effect:

1. Detection of media types, such as Screen,tv

2. Detects the characteristics of the layout viewport, such as the width and height resolution of the viewport

3. Feature-related queries, such as detecting whether the browser supports such features (this is not discussed because it is useless for web development because it is currently supported by the browser)

syntax for using media queries in CSS:

     @media 媒体类型 and (视口特性阀值){   

          // 满足条件的css样式代码

     }

To adapt to all of the devices, we should dynamically generate meta tags with javascript code:

Let scale = 1/window.devicepixelratio;

Document.queryselector (' meta[name= ' viewport "]). SetAttribute (' content ', ' width=device-width,initial-scale= ' + Scale + ', maximum-scale= ' + scale + ', minimum-scale= ' + scale + ', User-scalable=no ');

REM is the unit of relative dimensions, relative to the size of the HTML label font:

If the HTML font-size = 18px;

So 1rem = 18px, it should be remembered that REM is based on the font size of the HTML tag.

1. Set the layout viewport size to the device pixel size:

var scale = 1/window.devicepixelratio;

Document.queryselector (' meta[name= ' viewport "]). SetAttribute (' content ', ' width=device-width,initial-scale= ' + Scale + ', maximum-scale= ' + scale + ', minimum-scale= ' + scale + ', User-scalable=no ');

2. Dynamically set HTML font size:

Document.documentElement.style.fontSize = document.documentelement.clientwidth/10 + ' px ';

3. Convert dimensions in design drawings to REM

The REM size of the element = element of the PSD manuscript measures the pixel size/font-size value of the dynamically set HTML tag

Developing a mobile-side page