Web Front end Basic article ⑨

1.web end, the app side is currently implementing responsive layout, mainly in the following two ways.
CSS native code-responsive layout @media screen.
Bootstrap mobile device first, comes with frame.

Compatibility with native code the different values are introduced with @media screen according to the size of different screens
With the Bootstrap,js file adaptive, the advantage is not to divide the screen size, only to change some small data.
The web and app maps can't be the same, and it's best to use Sprite charts for browsing speed.

App side.
CSS native code writing needs to be noted: ① wide, using a percentage of the way.
② wide words, use REM, can not use two units in a set of CSS, use REM, preferably in percent.
③ @media screen Format
④margin padding recommended also in percent
⑤meta viewport must be added. Allow (not allow) User zoom
Graceful downgrade: Build full functionality from the start, then compatible with low-version browsers
Progressive enhancement: Build pages for low-version browsers, ensure the most basic functionality, and then improve and append features such as effects and interactivity for advanced browsers to achieve a better user experience.

Graceful demotion begins with a complex situation and attempts to reduce the supply of user experience, while the incremental enhancement begins with a very basic, workable version and is continuously expanded to suit the needs of the future environment. Downgrading (functional decay) means looking back, while progressive enhancement means looking forward while keeping its roots in a safe zone.

Web Front end Basic article ⑨