Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to realize the views and coordinates of CSS browser". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to realize the views and coordinates of the CSS browser.

Pixel (Pixel)

Pixel is the basic unit of image display, and a pixel is usually regarded as the smallest complete sampling of an image. The more pixels used to represent an image, the closer the result is to the original image.

Resolution (Image resolution)

Resolution (Image resolution) in everyday language, resolution is mostly used for the sharpness of images. The higher the resolution, the better the image quality and the more detail it can show.

Pixels per inch (PPI)

Pixels per inch (English: Pixels Per Inch, abbreviation: PPI), also known as pixel density, is an index of the number of pixels per unit area of a printed image or display. Generally used to measure the fineness of the screen of electronic equipment. In general, the higher the pixel value per inch, the finer the image can be displayed on the screen. As shown in the resolution above.

Retinal display screen (Retina Display)

Retina display screen (Retina Display) is a kind of display screen designed and commissioned by Apple. Some studies have shown that the highest PPI that can be distinguished by the naked eye is 300PPI, so more than 300 PPI is often called Retina display screen, this concept is wrong, Retina display screen refers to the normal use of the human body distance, can not see the screen pixels with the naked eye display screen.

Dots per inch (DPI)

DPI (English: Dots Per Inch, dots per inch) is a unit of measurement used for dot matrix digital images, meaning the number of points that can be sampled or displayed or output per inch in length. For example, the output of the printer can reach the resolution of 600DPI, which means that the printer can output 600X600=360000 output points per square inch.

Device independent pixels (DIP, DP)

Device independent pixel (Device Independent Pixels,DIP, also known as device independent pixel) is a physical unit of measurement, which is based on a computer-controlled coordinate system and abstract pixels (virtual pixels). It is a virtual pixel unit used to define UI layout.

Device pixel ratio (DPR)

The device pixel ratio (DPR) is the ratio of physical pixels to DIP on the device. The formula is as follows:

Window.devicePixelRatio = physical pixels / dips

CSS pixels (CSS Pixels)

CSS CSS Pixels is a concept born in WEB programming, which is used to set the value size of different CSS for each model in the browser. Because a CSS pixel (CSS Pixels) is a logical pixel, not a physical pixel, a CSS pixel may vary in size on different devices. But even so, for CSS, you want to look the same size on different devices as much as possible.

So how can this be achieved?

Based on this problem, W3C put forward the concept of reference pixel. The definition is as follows:

The reference pixel is the viewing angle of one pixel on the device, the pixel density is 96dpi, and the distance from the device is one arm. The standard arm length is 28 feet, so the viewing angle is about 0.0213 degrees. For the reading of arm length, 1px should be 0.26mm (1 hip 96 feet).

So what is the pixel size of 1px CSS?

Based on this question, the W3C gives the following answer:

For CSS devices, these dimensions are either anchored (I) by associating physical units with their physical measurements, or anchored (ii) by associating pixel units with reference pixels. For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (such as feet, centimeters, etc.). For low-resolution devices and devices with unusual viewing distance, it is recommended that the anchor unit be used as a large circle of pixels. For such devices, it is recommended that the pixel unit refer to the integer of the device pixel closest to the reference pixel.

This is the definition of 1px CSS pixels. It also reasonably explains why the physical size of the display device is different from the physical pixel, but the element size of the same CSS value is almost the same. This is because px implementations of different devices have different reference anchors.

How to calculate the screen size?

First of all, we can know that 1 inch = 2.54CM, and almost all screens are measured diagonally.

The common sizes of mobile phone screens are: 5, 6, 5.5, 6.5, 7

Notebooks are generally: 10, 12, 13, 14, 15, 18, 19

If you want to know the size of your screen, you can use Pythagorean theorem:

View

Viewports (viewport)

Viewports (viewport) represent the currently visible area of computer graphics. In Web browser terminology, it is usually the same as the browser window, but does not include the browser's UI, menu bar, etc.-that is, the part of the document you are browsing.

Viewport is a very important concept in WEB development, especially in responsive web design.

Through the introduction of the above series of terms, we can know that the size, resolution and CSS pixel size of different devices are different, so the size of the viewport is also related to the device.

In larger devices, on these devices, the application display area is not necessarily full screen, viewport is the size of the browser window.

On most mobile devices, the browser is full-screen and viewport is the size of the entire screen.

In full-screen mode, viewport is the scope of the device screen, the window is the browser window, the browser window size is less than or equal to the size of the viewport, and the document is the website, and the document size can be longer or wider than viewport.

How do I set up a document viewport?

The document viewport can be set up in three ways:

HTML tag

The first way is to introduce it into HTML.

The possible value of Value describes width as a positive integer or a string device-width defines the width of the viewport (viewport) in pixels (pixels). Height A positive integer or string device-height defines the height of the viewport (viewport) in pixels (pixels). Initial-scale A positive number between 0.0 and 10.0 defines the zoom ratio between the device width (the device width in portrait mode or the device height in landscape mode) and the viewport size. Maximum-scale A positive number between 0. 0 and 10. 0 defines the maximum value of scaling; it must be greater than or equal to the value of minimum-scale, otherwise it will lead to uncertain behavior. Minimum-scale A positive number between 0. 0 and 10. 0 defines the minimum value of scaling; it must be less than or equal to the value of maximum-scale, otherwise it will lead to uncertain behavior. User-scalable A Boolean value (yes or no) if set to no, users will not be able to zoom in or out of the page. The default is yes.

CSS pseudo Class Selector @ viewport

The @ viewport rule allows us to set viewport to the size of the document. This feature is mainly used for mobile devices, but it can also be used in desktop browsers that support features such as "pin to edge", such as Microsoft's Edge.

When the size is calculated as a percentage, it is the initial viewport referenced (viewport). The initial viewport refers to the viewport before it is modified by any user agent or style. Desktop browsers are generally based on window size if they are not in full-screen mode.

On a mobile device (or the full-screen mode of a desktop browser), the initial viewport is usually the part of the screen that the application can use. It may be full screen or subtract the part occupied by the operating system or other application (such as the status bar).

The syntax is as follows:

@ viewport {

}

Descriptor:

According to can_i_use, compatibility has gone viral almost across the board.

For the viewport settings that we often use on mobile devices

You can write it like this.

@ viewport {

Width: device-width

Zoom: 1.0

Min-zoom: 0.5

Max-zoom: 2.0

User-zoom: zoom

}

VisualViewport

First, let's look at Window.visualViewport.

This is a read-only experimental web api, currently only supported by chrome 60 + and Opera 47 +.

The attributes are as follows:

{

Height: 936, / / Visual viewport height, the return value is the CSS pixel value.

OffsetLeft: 0, / / offset between the edge of the visual viewport and the left side of the layout viewport

OffsetTop: 0, / / offset of the edge of the visual viewport from the top edge of the layout viewport

Onresize: null, / / triggered when the size of a visual viewport changes

Onscroll: null, / / triggered when scrolling a visual viewport.

PageLeft: 0, / / the initialization of the edge of the visual viewport contains the X coordinates of the origin, and the return value is the CSS pixel value.

PageTop: 6680, / / the initialization of the edge of the visual viewport contains the Y coordinates of the origin, and the return value is the CSS pixel value.

Scale: 1, / / the returned value is the zoom ratio of the visual viewport

Width: 1364, / / Visual viewport width, the return value is the CSS pixel value.

}

Coordinate system

Through the above introduction to the device screen and viewports, we should be able to have a basic understanding of the browser display in electronic devices. So let's take a look at the coordinate system in the browser.

Dekar coordinate system

As early as in junior high school, we began to come into contact with a very important concept-Cartesian coordinate system. In mathematics, the Cartesian coordinate system (English: Cartesian coordinate system), also known as Cartesian coordinate system, is an orthogonal coordinate system.

The following figure shows the plane coordinate system in mathematical concepts:

The following figure shows the three-dimensional Cartesian coordinate system in mathematical concepts:

The information on the diagram will not be explained too much. If you need to know more, please refer to the https://zh.wikipedia.org/ Cartesian coordinate system.

Coordinate system in WEB

The coordinate system in our mathematical concept is introduced above, and there is also a corresponding coordinate system in the WEB page. The algorithm is similar, except that it is a little different from the concept in our mathematics, that is, the origin is located in the upper-left corner of the browser. The entire browser screen is the first quadrant, with only positive values and negative values hidden. This is true for both planar and 3D coordinates, except that because the browser screen is flat, the Z axis in the 3D coordinates runs through the browser.

The coordinate values of the plane coordinate system can be seen in the following illustration and DEMO:

Plane coordinate system

Html

Body

Div {

Margin: 0

Padding: 0

}

Html

Body {

Width: 100%

Height: 100%

}

.poinerPosition {

Font-size: 2vw

Position: absolute

Left: 0

Top: 0

}

'use strict'

Window.addEventListener ('pointermove', PointerEvent = > {)

Const {

X

Y

} = PointerEvent

PoinerPositioning [XSS _ clean] =-

(${x}, ${y})

--

PoinerPosition.style.left =-- ${x + 20} px--

PoinerPosition.style.top =-- ${y} px--

})

At this point, I believe you have a deeper understanding of "how to realize the views and coordinates of the CSS browser". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.