1. pixels
1.1 what is called the physical pixels
for example, the phone is 1792 × 828 pixel resolution, the phone screen is a lateral point 828, the point on the screen 1792 has longitudinal phone, the same screen size, the more points the image display Gray .
On a screen above mentioned points is the physical pixel (phy sical pixel), also known as the physical pixel device pixels (dp: device pixel).
In fact, each pixel is a point, each point consisting of red, green and blue color, only need to control each point of light and shade of each color, you can display different colors.
1.2 What is logical pixel
logical pixel, also known as CSS pixels (logical pixel)
has also become a device independent pixels (dip: divice independent pixel)
in web development, is the use of CSS pixels
CSS pixels relationship with the physical pixels
In SD screen, a pixel using a physical css display pixels
in high-definition screen, a pixel using css represents four physical pixels
** Note: ** HD screen, the four points correspond to a SD screen spot size, so that a pixel css using four physical pixels high-definition screen in FIG.
The more points, the finer the display, lights think. . . .
The number of physical pixels browser based on the current device screen, automatically converted from one CSS pixel representing
1.3 What is device pixels than the
device pixel ratio (dpr: device pixel ratio)
dpr = device pixels / CSS pixels (the zoom ratio is to be 1)
So dpr under the above two screens, respectively
dpr = 2 represents the use of a 2X2 pixel css pixel rendering devices
Note: the calculation means is the one direction, horizontal or vertical
So dpr> 1 we can be considered high-definition screen
1.4 What is PPI
complication PPI is that if a different context to which he belongs, will be completely different meaning. When we talk about PPI display device, it is on behalf of that pixel density of the screen; when we are talking about pictures and relevant, we are talking about printing accuracy or resolution of the printer when printing. Here the former case we are mainly described, with regard to the latter two, we are in the final talks to the article, interested students can read.
PPI full name Pixel Per Inch, translated as pixel values per inch, more accurate to say that the pixel density, which is a measure of the situation has pixel values per unit of physical area.
As shown above, has more in the inner area of the pixel unit 1 inch, the greater the density, the higher the value of the PPI. But what is the practical significance pixel density? What is it expressed? High or low, have any effect on the device display for?
In general, we certainly hope PPI value as high as possible, because of the higher PPI means that on the same actual physical size of the screen can accommodate more pixels, the screen can show more detail, which means smoother picture.
2. FIG twice
for a 50px * 50px (css pixels) images, the phone is open Retina screen, a magnification ratio will follow the physical pixels described above, this will result in blurred images
in a standard viewport settings, a fold plans to improve the picture quality, resolve ambiguities in the definition screen devices
typically use twice the map, because the impact of the iphone6 \ 7 \ 8, but now there is also the case four times the figure Figure 3 times, this look at the actual development company demand
background image Note scaling issues
specific solutions to
prepare a 100 * 100 images, css but by setting it to 50 * 50, on the high-definition screen, it will be magnified by 2, into 100 * 100, because the picture back body is 100 * 100, it will not be distorted
Note that must be set to 50 * 50, otherwise it will enlarge to 200 * 200 will still be distorted
On standard definition screen, a css pixels using a physical pixel representation
in high-definition screen, a css pixels using two physical pixel representation
is to say, the picture will be magnified in high-definition screen twice, so 50 * 50 images will be enlarged to 100 * 100
so, our solution idea is:
if we want to display the picture 50 * 50 on the phone, according to phone dpr, if it is 2, then use a 100 * 100 images, then
by css set it to 50 * 50, then to a high-definition screen, the will automatically be magnified by 2 times, become 100 * 100, and we picture
turn around is 100 * 100, it will not be distorted
background picture is also the same way , Beijing should be ready to double the size of the picture, and then through the background-size designed to be 1 times
How quickly at first twice map, Figure 3 times, do not forget to cut our PS in Figure artifact
Summary prepared picture is twice the size of the development or other multiples
3. CSS3 box model features a
set box size to prevail as the norm or border
Traditional modes width calculation: width = CSS box provided in border + width + padding
CSS3 box model: width = CSS inside width of the box provided in the border and padding comprises
That CSS3 box model, padding and border settings will not support a big box
Note: All mobile client can use CSS3 box model, PC-compatible terminal if required, using the traditional model, does not consider compatible, using CSS3 box model
4. Make a single movement end page layout
liquid layout (layout percentage)
Flex elastic layout (highly recommended)
less REM + + media layout query
hybrid layout
responsive page compatible mobile terminal
media queries
on Bootstrap
5. The layout viewport, visual viewport , over the viewport
layout
the viewport (layout viewport): in the PC, the layout viewport equal to the width of the browser window. And on the mobile side, it is due to make the PC browser designed website can be fully displayed on the mobile end of the small screen, this time in the layout viewport will be much larger than the screen of a mobile device, a scroll bar will appear. js obtain layout viewports: document.documentElement.clientWidth
| document.body.clientWidth;
Visual
viewport (visual viewport): area of the page the user is seeing. Users can view the contents of the site by scaling. If you shrink the site, we saw the site area will become larger, then the visual viewport is also larger, the same token, the user zooms site, we can see the site area will be reduced, this time visual viewport too small a. No matter how the user zoom, will not affect the width of the layout viewport. js obtaining visual viewport: window.innerWidth;
Ideal
the viewport (over the viewport): a size distribution over the viewport, only when a layout viewport size equal to the screen size of the device, the viewport is over. js acquired over the viewport: window.screen.width;
. 1, on a desktop browser, the browser window is consistent with the viewport, the viewport (CSS standards documents, referred to as "block comprising an initial") is the percentage of the width of the CSS the root of projections, and therefore, the browser window is constrained CSS layout viewport;
2, on the phone, there are two viewport, the layout viewport will limit the CSS layout; visual viewport decide website content users see;
3, there is a mobile terminal browser viewport ideal, it is the specific device an ideal layout viewport size specific browser;
4, can be defined as the size of layout viewport over the viewport. This is also the basis for design of response.