A preface.

Now users can browse the web not only on PC, but also on mobile devices, which bring great convenience to users. This requires developers not only to focus on the implementation of traditional PC pages, but also to consider the implementation of mobile devices. The solutions adopted by different companies in the implementation of mobile terminal are also different. Next, I will learn how suning Tesco deals with the relationship between PC terminal and mobile terminal based on their implementation in PC terminal and mobile terminal, and talk about some personal thoughts.

2. The characteristics of suning Tesco’s PC and mobile page layout

First of all, it should be noted that suning’s PC terminal page and mobile terminal page are two independent pages.

  • PC

    1. General column and type center

    As a front-end developer, the page implementation should have the concept of the banner and the layout center. Type heart and general bar in the PC side of the page will be basically reflected.

    The banner, regardless of the width of the browser window, always takes up the entire horizontal area, and the center of the page is always horizontally centered. In the PC page of Suning Tesco, the background is basically in the form of a banner, while its head, main body and tail are in the form of a type center, and the type center is set with a fixed value.

    2. Screen size is not affected

    When changing the size of the browser window, it can be found that Suning Tesco does not deal with the page layout, element size and font size in accordance with the screen size change. The width of the browser window should not be smaller than the width of the screen if the user wants to see the entire page.

  • Mobile terminal (M station)

    1. Media query + REM layout

    Viewing the front-end code of suning Shopping mobile terminal page, it can be found that the font sizes of HTML elements are different based on different screen sizes set by media query in page layout, and all other elements are in REM as a unit, so as to realize dynamic changes of elements under different screen sizes, including font sizes.

    2. Both sides are fixed and the middle is self-adaptive

    To achieve this effect, we can use the Holy Grail layout or the double-flying wing layout, which I have introduced in the implementation of JINGdong mobile terminal page before. The most common application is the search module.

3. Whether the PC and mobile terminal are the same set of pages

It seems that many websites now have two separate pages on PC and mobile for easy maintenance. When visiting this website, first judge the device you are currently visiting. If it is a PC, return to the PC page; if it is a mobile page, return to the mobile page. It’s not the same set of pages we think of, loading different CSS styles based on the screen size of the current device through media queries. This means that on the PC and mobile end of the implementation of the two schemes, one using the same set of pages, through loading different styles to achieve different effects; The second is to use a separate set of independent pages.

Each of these two schemes has its advantages and disadvantages. The first thing to understand is the interaction pattern of the front and back ends. At present, the interaction mode of the front and back ends is basically separated from the front and back ends. The front end accesses the data through the interface, and then processes the data and displays it in the corresponding position of the page.

If, PC and mobile terminal is used the same set of page, just CSS style is different, so from the interface to get the data and deal with this part only need to do a good job, but, this way of CSS demand is high, need to developers for different screen size set corresponding style, when it comes to style, believes that many developers to dig the details quickly. It’s not easy, or at least it’s annoying for people with OBSessive-compulsive disorder. Another problem is that the way a page looks is related to the structure of the HTML, which is sometimes written to look good. If different effects are displayed on different screens, but the structure of the same page is the same, this can cause some problems in effect implementation.

If the PC and mobile are two separate pages, that means retrieving data from the interface and processing it twice, and of course, CSS is written twice. But because they are separate sets of pages, each can focus on its own implementation, which is also good for maintenance. Note that if the two ends are separate pages, the dynamic font size can be ignored on the PC, but it should be considered on the mobile end.

Iv. How do PC and mobile pages adapt to screens of various sizes

Whether PC or mobile page (HTML+CSS part) implementation process, should be like this, the overall layout first, then details. PC page and mobile page in the implementation of the time to consider the different display size, can ensure the normal display of the page. In this case, the focus on PC and mobile is different.

PC for screen size inconsistency, in the layout can use media query to achieve the optimal display effect, whether the screen is small enough or large enough, media query is a good solution. Of course, you can also set the min-width of the page if the screen is small enough to scroll through the page. Whichever solution is adopted depends on the implementation requirements.

Mobile devices can use media queries or Flex layouts for screen sizes that are inconsistent. Although there are a variety of screen sizes on mobile, horizontal scrollbars are generally not available on any screen, unlike on PC. In addition, due to the mobile screen is relatively small, so the font size should also be considered and processed accordingly.

V. Switch between PC page and mobile page

When users visit a page, how to automatically identify the current device is PC or mobile, and load the corresponding page?

<script> if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fen Nec | wOSBrowser | BrowserNG | WebOS | Symbian | Windows Phone)/I))) {window. The location. Href = "URL" mobile end; } else {window.location.href = "PC URL"; } </script>Copy the code

It is not difficult to find that the PC terminal and mobile terminal of Suning Shopping page access address is not the same. Therefore, it is important to note that the PC page and the mobile page are completely separate sets of pages, rather than the same set of pages loading different styles to achieve different display effects.

6. Rem layout

1. The rem unit

Rem is a relative unit, the font size of an HTML element

For example, the root element (HTML) is set to font-size: 10; Font-size: 2rem; If I change it to PX, it’s 20px;

Rem’s advantage: The size of the parent element text may vary, but the entire page has only one HTML, which gives you good control over the size of the entire page’s elements.

2. The idea of REM layout

Content reference: Principles and Solutions of front-end responsive layout (detailed version)

  • It is generally not desirable to set specific widths for elements, but you can set specific widths for small ICONS
  • The height value can be set to a fixed value, how big the design is, we are strict with how big
  • All set fixed values are usedremDo units (first set a reference value in HTML:pxandremThe corresponding proportion, and then obtain in the effect drawingpxThe value of the layout is converted toremValue)
  • Js takes the width of the real screen, divides it by the width of the design draft, calculates the proportion, resets the previous reference value according to the proportion, so that the project can be adaptive on the mobile end

7. Media inquiries

Definition 1.

Using @media queries, you can define different styles for different media types.

@Media can be set to different styles for different screen sizes, especially if you need to set up responsive pages.

When you resize the browser, the page will also be rerendered according to the width and height of the browser.

2. Grammar

For details about the parameters, see the documentation

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
Copy the code
/* lightblue:*/ @media screen and (max-width: 300px) {body {background-color:lightblue; }}Copy the code

Use different stylesheets for different media

<link media="screen and (max-width: 300px)" rel="stylesheet" href="css/screen_pc.css">
Copy the code

Eight. Media query + REM element dynamic change

When we implemented mobile pages, we wanted the layout to be reasonable and the element sizes to be appropriate for different screen sizes. For example, you don’t want the user to see a very small font on a very small screen, it’s not a very good experience for the user. Therefore, to solve this problem, media query + REM can be used to implement dynamic changes of elements. The realization of suning Shopping mobile terminal page is a good practice.

html{ font-size:100px; } /* @media screen and (min-width:320px){HTML {font-size:50px; } } @media screen and (min-width:640px){ html{ font-size:50px; }} /*2. All elements in the page use rem as the unit */Copy the code

9. To summarize

If a website is to achieve both PC and mobile access, it is necessary to consider whether to use the same set of pages or a separate page. In my opinion, the best practice is for the PC and mobile to be independent of each other, as this is better for maintenance. Under this premise, whether in the PC terminal implementation or in the mobile terminal implementation, Suning Shopping practice is worth learning.