Mobile-side development

1.pixel

Iphone5 said that he is a 640*1136 screen, then we write a div in a page is 640*200px look, but will exceed, why?
Chrome will be 320*568 when it adjusts, why?

1.Retina screen
2. Not set <meta name= "viewport" content= "width=device-width,initial-scale=1.0"/>

Ipone5 said he was 640 wide meaning is that the physical pixels, is fixed a unit, how big is the big

But we develop the pixel is a logical pixel, that is, the browser used by the abstraction of a unit can be based on different devices to change the size of the smaller

Device pixel scaling ratio devicepixelratio (DPR), this thing to control the relationship between the logical pixel and the physical pixels

Logical pixel 640 = device pixel scaling ratio 2*320 pixels

Ipone5 device pixel scaling ratio is 2.

That is, 1 logical pixels ==4 physical logic, which in one direction is the ratio of 1:2.

General HD screen DPR are greater than or equal to 2, kidney 6 is 3 .... So it makes sense to be so expensive ...

Phone screen and PC screen is not the same, is the Retina HD screen

2.viewport View

1. Old Nokia era, when visiting a PC website, only access to the upper left part;
1. A PC-side page on the mobile side can also be the entire page is shown, but will be reduced display, but after processing, you can follow the design of the idea
On the mobile side in different ways to demonstrate, that is, responsive technology

In fact, this time the processing is to put the entire page into a thing called viewport, and then the viewport to zoom, and finally render to
In the phone screen

3.meta Label

Using meta tags to change some of the things we viewport, we can make our pages more perfect to render on the mobile side.

Width n device-width to set widths to the width of the device and, of course, to set other
Initial-scale 1.0 Set the zoom of the page,
Which is the viewport scale,
This knowledge point is not important, do not care, just remember to set to 1.
Minimum-scale set minimum scale not required
Maximum0scale set up to scale without
User-scalable whether the user can use their fingers to zoom

The phone screen is not the same as the PC screen we understand, it's the retina screen he's talking about the physical pixels, we're talking about the logical pixels.
To do a mobile project, or a responsive project, you must add
<meta name= "viewport" content= "Width=device-width,initial-scale=1.0,user-scalable=no"/>

4. Mobile Layout

Responsive: Performance is not optimal, because styles are written a lot, but can reduce duplication of development

Responsive percent layout, and flex resilient layout Android 4.4

Percent Flex layout VW VH REM
@media

Media queries to accommodate different fixed-width designs, converting from one set of styles to another set of styles, smooth and friendly conversions

* Elastic image

This picture itself has a size bar, in the process of doing the project should let him according to the width of the screen to zoom, but
Cannot exceed one's own maximum value,
. A img{
max-width:100%;
Height:auto;
Display:block;
margin:0 Auto;
}
The picture changes according to the change of the container, otherwise the picture will be the original size after adding meta

Special style handling

HD picture

On the mobile page to render the picture, in order to avoid blurred images, 100*100, in the HD screen is
Use 200*200 pixels to process;
But in general, the designers out of the figure are twice times the screen resolution (based on Ipone6 375*667) so the actual picture is 750*1334
So, let's just take the picture and ok~ it.
100*100 200*200

* If the box is placed in the same size as the box picture, will be distorted, the solution is to put two times the size of the box picture;

1 pixel border
The 1 pixel border is rendered in 2px, so there is a way to do so;
. a{
width:100px;
height:100px;
border-top:1px solid #333;
position:relative;
}
. a:after{
Content: "";
Position:absolute;
bottom:0px;
width:100%;
border-bottom:1px solid #333;
Transform:scaley (0.5);
}

REM is based on the font size of the root element.
HTML {
font-size:62.5%; /* 10÷16=62.5% */
}
@media only screen and (min-width:481px) {
HTML {
Font-size:94%!important; /* 15.04÷16=94% */
}
}
@media only screen and (min-width:561px) {
HTML {
Font-size:109%!important; /* 17.44÷16=109% */
}
}
@media only screen and (min-width:641px) {
HTML {
Font-size:125%!important; /* 20÷16=125% */
}
}

Vw:viewpoint width, window width, 1vw equals 1% of the window width.
Vh:viewpoint height, window height, 1VH equals 1% of the window height.
The smaller of the VMIN:VW and VH.
The larger of the VMAX:VW and VH.
ie9+ local support, Chrome/firefox/safari/opera support, iOS safari 8+ support,
Android browser4.4+ support, Chrome for ANDROID39 support

Multiple lines of text overflow
Overflow:hidden;
Text-overflow:ellipsis;
Display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

Mobile-side development