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

This article is to share with you about the development of responsive web page example analysis, the editor thinks it is very practical, so share with you to learn, I hope you can get something after reading this article, say no more, follow the editor to have a look.

Responsive web design and development, we need to write different styles when using media queries to adapt to different mobile screen styles, so let's share my personal experience in developing responsive web pages. Currently, the independent pixels of mobile phones are 360, 360, 384, 400, and iphone6+ is 414, so we only need to match the current ones as follows:

1. For the width of the screen with independent pixels of 360 ~ 399, etc.

/ *

* but the margins, font size, etc., should be calculated by installing 360px.

, /

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

two。 Independent pixels for mobile phones are between 320,359 and 359.

/ * min-width:320px

* for css with device independent pixel 320px

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

, /

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

3. For devices with independent pixels above 400px.

/ *

* for devices, independent pixels are 400px, margins, etc., are calculated according to 400px

, /

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

4. For css whose device independent pixel is 640px ~ 999px

/ * min-width:640px

* for css with device independent pixel 640px

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

* margin and so on are calculated according to 640px

, /

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

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

/ * minimum width 1000 style

* in order to adapt to the PC side, PC is designed with 1000px by default at design time.

, /

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

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

First of all, if the design is done on the mobile side according to the 750px design manuscript, if the font size under 750px we use rem to write the size; then their font size is calculated as follows:

6. For css whose device independent pixel is 640px ~ 999px

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

/ * 750Universe 640 = 1.17cm /

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

}

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

/ * 750400 = 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) {

/ * 750max 320 = 2.34 * /

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

}

7. Calculation methods for width, height, background-size, margin and padding

If the width under the 750px is 132px; the height is 132px; the margin:20px;Padding:20px; is for the css with independent pixels of 640px ~ 999px of the device.

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

/ * 750Universe 640 = 1.17cm /

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

/ / the following attributes are all derived from their own pixels / 1.17.

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) {

/ * 750400 = 1.875 * /

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

/ / all the following attributes are derived from their own pixels / 1.875.

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 * /

/ / all the following attributes are derived from their own pixels / 2.08.

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) {

/ * 750max 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 font is too small under the small screen, which makes the user look too hard. We can just drop it a little bigger for the small screen.

The above is the example analysis of developing responsive web pages, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.