NetEase home page responsive style implementation technology research

NetEase home page realizes page (font) responsiveness style by using different container classes in viewports of different sizes, as shown in Figure 1. Use the large container class (index2017_1200_wrap, width: 1200px) when the viewport is greater than or equal to 1420px, and use the small container class (Index2017_960_wrap, width: 960px) when the viewport is smaller than 1420px. The switching of container classes relies on JavaScript listening, as shown in Figure 2, without using CSS3’s media queries.

When the viewport changes on the home page of NetEase cause responsive changes in font and layout, the page will be stuck.



Figure 1 Container class used on the home page of NetEase




Figure 2 Code used to monitor viewport changes on the home page of NetEase

Rem compatibility investigation of CSS3

Browser compatibility with REM as a unit is shown in Figure 3. Note that IE9 / IE10 does not support rem for font abbreviations, and IE9 / IE1 / IE11 does not support REM for the line-height attribute of pseudo-elements.



The test code is as follows:

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css"> html{ font-size: 20px; } .bigger{ font-size: 2rem; } .biggest{ font-size: 4rem; Font font: ITALic bold 5rem/1.2 Arial, sans-serif; } .padding-shorthand{ border: 1px red solid; margin: 3rem; padding: 5rem; } .pseudo-class{ line-height: 6rem; } .pseudo-class:hover{ cursor: pointer; font-size: 5rem; } .pseudo-element:after{ content:'This is a pseudo-element element.'; line-height: 20rem; font-size: 5rem; } < / style > < / head > < body > < div > native font < / div > < div class ="bigger"> Larger font </div> <div class="biggest"<div > <div class="font-shorthand"<div > <div class="padding-shorthand"<div > <div class="pseudo-class"> pseudo-class </div> <div class="pseudo-element"> Pseudo element </div> </body> </ HTML >Copy the code

Website technical plan transformation

Retrofit existing projects VS move to new projects

Advantages of existing projects:





Shortcomings of existing projects:





Advantages of adopting new project development:








Shortcomings of adopting new project development:








Implementation of responsive style

Scheme 1: REM + Media Query Scheme (recommended)

Solution description: Use media query to set the font size of the root element under a specific viewport size, use REM as a unit to set the attributes of elements with responsive style, use less mixed function to achieve the requirements of low-level browser degradation.

Advantages: fast response time, small amount of code, strong ability to cope with unknown changes (e.g. viewport size change from two to three), increased team experience in USING REM on PC.

Disadvantages: The corresponding IE8 degradation strategy must be adopted, and there may be unknown pits.

Scheme 2:Fixed class + media query scheme

Solution Description: Use media query to apply specific font size and line height properties to specific common styles under specific viewport widths. Use cSS3-MediaQueries-js to deal with compatibility problems of IE8.

Advantages: fast response time, basic COMPATIBILITY with IE8, small amount of common style code although two styles are required, strong ability to cope with unknown changes (such as the viewport size division from two to three).

Disadvantages: Elements that need to be responsive need to contain specific common style names (class names), increasing the amount of code and maintenance.

Solution 3:The variable container solution is currently used by NetEase

Solution description: Define two sets of styles in different containers, use JavaScript to monitor the viewport size change, and transform the top-level container when the viewport size change reaches a critical value.

Advantages: Fully compatible with IE8

Disadvantages: Two sets of styles are required, the maintenance workload is large, the judgment of viewport size is not accurate, the response to viewport changes is not timely, the page will be slightly stuck in response to zoom, and the ability to cope with unknown changes (such as the viewport size division from two to three) is poor.

Split screen load

For pages with a lot of content, especially pictures, the split-screen loading technology is used to avoid the problem that a large number of static resources are loaded during the home page initialization, resulting in slow response.

Thinking about front-end development management

Before and during the development work, whether to consider joining the technical review process should strengthen the document management, including the record of the project version, the record of the resources used by the project (static resources, modules, public classes, etc.).