pixel

  • Device pixel/physical pixel: Determined by the screen of the device, it is the smallest unit on the screen that controls the display.
  • Device-independent pixel/device-logical pixel: a virtual pixel that can be controlled by a program, corresponding to a CSS pixel in Web development.
  • DPR (Device pixel ratio) : Device pixel ratio = device pixels/device-independent pixels. If device pixels are larger than device-independent pixels (for devices with DPR greater than 1, we often refer to high-definition or Retina screens), there will be multiple device pixels for each device-independent pixel.

viewport

A viewport on a mobile device is the area of the device’s screen that can be used to display our web pages. But viewPort is not limited to the size of the browser’s viewable area. It can be larger or smaller than the browser’s viewable area. By default, viewports on mobile devices are generally larger than the viewable area of the browser. Because of considering the resolution of the mobile device is small relative to the desktop computer, so in order to be kept in normal on a mobile device show that the traditional design for the desktop browser, the browser on a mobile device will set their default viewport to 980 px or 1024 px (may also be other values, this is determined by the equipment itself), But the result is a horizontal scroll bar in the browser,

  • Layout Viewport: a block of HTML elements that controls layout and is the root of all CSS percentage calculations. If CSS is a brush, layout viewports are the canvas. This piece of canvas has a default size (if there is no manual to set the meta viewport), generally between 768 px – 1024 px, can through the document. The documentElement. ClientWidth access. In this way, the layout of web pages is no longer limited by device size, even on mobile devices with small screens can accommodate PC websites.
  • Visual viewport: refers to the area that the user sees through the device screen. The visual viewport can be resized by zooming in and outwindow.innerWidthTo obtain.
    • When you zoom in, the visual viewport gets smaller, because the visual viewport is measured by CSS pixels. When you zoom in, you need 200 CSS pixels to fill the screen. Now you need 100 CSS pixels to fill the screen, so the visual viewport gets smaller. But zooming on the mobile side does not change the layout viewport.
Layout viewports Control CSS layout viewports determine what the user sees on the site and are scalableCopy the code
  • Ideal viewport: The ideal viewport is to set the layout viewport and the width of the device, can be passedwindow.screen.widthTo obtain
    • We now have two viewPorts: Layout ViewPort and Visual ViewPort. But browsers don’t think that’s enough, because more and more websites are individually designed for mobile devices and must have a viewport that works perfectly for mobile devices.
    • Viewport for mobile devices. Perfect fit means that, first of all, the user does not need to zoom and horizontal scrollbars to see all the content of the site; Second, the size of the text displayed is appropriate. For example, a 14px text will not be too small to be seen on a high-density screen. Ideally, this 14px text will be displayed in the same size regardless of the screen density and resolution. Of course, not just text, but other elements like images.

<meta viewport>


  • Width: Set the layout viewport to a fixed value, such as 375px or device-width
  • Initial-scale: Sets the initial scale of the page
  • Minimum-scale: Sets the minimum reduction
  • Maximum-scale: sets the maximum zoom level
  • User-scalable: Disables scaling when set to no

initial-scale

Zoom factor = ideal viewport width/visual viewport width

Since the width of the desired viewport is the same as the width of the device, setting the zoom factor also sets the width of the visual viewport and initializes the layout viewport to the value of this visual viewport.

Meta sets both width and initial-scale

Initial-scale initializes the viewport and layout viewport, but width specifies the size of the layout viewport.

IPhone6, for example, its size is 667 * 375 (w) (h), if set, perform the console. The log (layout viewport: ${document. DocumentElement. ClientWidth}; Visual viewport: ${window.innerWidth}) gives you “Layout viewport: 400; Visual port: 400 “. At that time a rotating equipment, then turned into a 667 (w) * 375 (h), then perform up the console. The log (layout viewport: ${document. DocumentElement. ClientWidth}; Visual viewport: ${window.innerWidth}) gives you “Layout viewport: 667; Visual port: 667 “.

The conclusion is that both width and initial-scale initialize the layout viewport, but the browser takes its maximum value.

Set up the ideal viewport

<meta name=”viewport” content=”width=device-width,initial-scale=1″>

Width =device-width =1; initial-scale=1; initial-scale=1; Since some browsers set only one of them, there is no guarantee that the desired viewport size will change correctly as the screen rotates, so writing both together is just for compatibility purposes.

Vw, the vh

Is a relative unit, which is relative to the layout viewport.

  • Vw: 1vw= Layout viewport width /100
  • Vh: 1vw= Layout viewport height /100

Restore design

The design drawing is usually an IP6 prototype, the size is the device pixel, so when writing CSS, it should be divided by 2 (DPR =2).

example

Implement a 1px physical pixel border

  • 1. Use pseudo-element + child + parent + scale
  • 2. Set the scale value of viewPort
  • 3. CSS gradient
  • 4. Use image implementation (base64)
  • 5. Use SVG (embed background URL)

data

Use the calc function to set the font size of the root node

The calc() function

/* font-size=100px */ HTML {font-size: calc(100vw / 7.5); //(100vw/750)*100px }Copy the code