On the Mobile development page

On the Mobile development page

A previous article is: Responsive Web Combat Summary has introduced a number of knowledge points, here is not more introduced; let's learn how to use media queries to write different CSS styles, and for responsive web design development, using media queries to adapt to different mobile screen style development, We need to write different styles, so we can share my experience of developing responsive web pages, for now, there are 320,360,384,400 independent pixels for the mobile phone, and iphone6+ is a 414 independent pixel, so we just need to do the following:

1. The width of the screen is 360 ~399 for cell phone independent pixels

/*

* But the margin font size, etc. or install 360px to calculate

*/

@media (min-width:360px) and (max-width:399px) {}

2. For mobile independent pixels is between 320~359

/* min-width:320px

* For the device independent pixel 320px CSS

* Between min-width:320 and max-width:359

*/

@media (min-width:320px) and (max-width:359px) {}

3. For the device independent pixel is more than 400px style.

/*

* for device independent pixel 400px, margin and so on are calculated according to 400px

*/

@media (min-width:400px) and (max-width:450px) {}

4. For the device independent pixel 640px ~ 999px css

/* min-width:640px

* For the device independent pixel 640px CSS

* Between min-width:640 and max-width:999

* Margin is calculated as 640px.

*/

@media (min-width:640px) and (max-width:999px) {}

5. But on the PC side, in order to adapt to the PC side, so for the width of more than 1000 also do a display processing.

/* Minimum width 1000 style

* In order to adapt to the PC side, the PC end is designed by default at 1000px.

*/

@media screen and (min-width:1000px) {}

One: Use REM to set the font

to facilitate the calculation of the font, we have to set the browser 10px, we all know that the browser default pixel is 16px, so we need to html{font-size:62.5%;}//10/16 = 62.5%;

First, if the design is on the mobile side according to the 750px design manuscript, if the font size under 750px We use REM to write size, then their font size in individual pixels under the following calculation:

1. For the device independent pixel 640px ~ 999px CSS

@media (min-width:640px) and (max-width:999px) {

/* 750/640 = 1.17*/

html{font-size:53.42%;} /*62.5%/1.17 */

}

@media (min-width:400px) and (max-width:450px) {

/* 750/400 = 1.875 */

html{font-size:33.33%}/* 62.5%/1.875 */

}

@media (min-width:360px) and (max-width:399px) {

/* 750/360 = 2.08 */

html{font-size:30%}/* 62.5%/2.08 */

}

@media (min-width:320px) and (max-width:359px) {

/* 750/320 = 2.34 */

html{font-size:26.7%}/* 62.5/2.34 */

}

Second: for width, height, background-size, margin and padding calculation method;

if the width at 750px is 132px, the height is 132px;background-size:132px 132px; margin:20px; padding:20px;

For the device independent pixel 640px ~ 999px CSS

@media (min-width:640px) and (max-width:999px) {

/* 750/640 = 1.17*/

html{font-size:53.42%;} /*62.5%/1.17 */

The following properties are all of their own pixels/1.17 derived

width:112.82px; 132/1.17

height:112.82px; 132/1.17

BACKGROUND-SIZE:112.82PX 112.82px; 132/1.17

margin:17.09px; 20/1.17

padding:17.09px; 20/1.17

}

@media (min-width:400px) and (max-width:450px) {

/* 750/400 = 1.875 */

html{font-size:33.33%}/* 62.5%/1.875 */

The following properties are all of their own pixels/1.875 derived

width:70.4px; 132/1.875

height:70.4px; 132/1.875

BACKGROUND-SIZE:70.4PX 70.4px; 132/1.875

margin:10.67px; 20/1.875

padding:10.67px; 20/1.875

}

@media (min-width:360px) and (max-width:399px) {

/* 750/360 = 2.08 */

html{font-size:30%}/* 62.5%/2.08 */

The following properties are all of their own pixels/2.08 derived

width:63.46px; 132/2.08

height:63.46px; 132/2.08

BACKGROUND-SIZE:63.46PX 63.46px; 132/2.08

margin:9.62px; 20/2.08

padding:9.62px; 20/2.08

}

@media (min-width:320px) and (max-width:359px) {

/* 750/320 = 2.34 */

html{font-size:26.7%}/* 62.5/2.34 */

width:56.41px; 132/2.34

height:56.41px; 132/2.34

BACKGROUND-SIZE:56.41PX 56.41px; 132/2.34

margin:8.55px; 20/2.34

padding:8.55px; 20/2.34

}

But sometimes the small screen under the font is too small, so that the user seems too difficult, we can be appropriate for the small screen down a little bit;

On the Mobile development page