Summary of the questionnaire project

In the first two days, there was a front-end development on the questionnaire project, which mainly involved two aspects of the content. The first aspect is that the questionnaire needs to involve both PC-side and mobile-phone-side two parts, focusing more on the display of mobile phones. The second aspect is that the code is embedded in the third-party code and needs to be served and counted on the third-party platform, involving cross-domain issues.

First of all, talk about mobile phone development encountered some problems and summary it. (In fact, there are too many points on the mobile phone need to pay attention, here just said some of the project encountered, will slowly add)

Responsive layout

Because we want to be compatible with the PC side and embed the code in the third party, there is no way to develop two sets of CSS to fit the page, so the responsive layout is used.

Implementing a responsive layout involves the following steps:

1. First add the head tag

<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1, User-scalable=no" >

The specific parameter meaning:

The viewport property of the META tag is the declaration that sets the original size, display, and scale on the mobile device. The parameters you can use are set as follows:

Width of the Width:viewport

The height of the Height:viewport

Initial-scale: Initial zoom ratio

Minimum-scale: The minimum scale to allow the user to zoom

Maximum-scale: Allows the user to zoom to the maximum scale

User-scalable: Whether the user can manually scale

2. Setting Up Media detection

PC side:

@media screen and (min-width:1280px) {
#head {...}
#content {...}
#footer {...}
}

Mobile phone side:

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

}

3. Width requires percent use

At the same time, the element try not to use absolute, use the words outside to set a layer relative

4. Set the text, using EM or REM

{    font-size: 62.5%;}  {    font-size: 1rem;}

Principle:

Browser conventions: 1em = 16px

EM is relative to the size of the parent element

REM is relative to the root directory size

In order to change the correspondence of 1em = 16px, set the HTML {font-size:62.5%} so that the subsequent settings can be replaced by the 1em = 10px relationship.

The principle of REM is the same, but the ease of REM is that it is determined relative to the font size of the root directory and does not change as the size of the parent element changes.

REM Compatibility: (Ie9.0+,firefox,chrome are supported, if not considered compatible with the low version of IE can be used, exactly our project does not need)

Not to be continued.

P.S. Thank you very much for the simple 3-step setup of the cloud, so that your blog park more beautiful! Blog, borrowed a bit of CSS inside.

Summary of the questionnaire project