First, fixed layout

Fixed layout is the first time to do mobile terminal is the best way to choose, the idea of using PC terminal, relatively fast start. Add the ViewPort to the TAB and assume the entire page is 320px wide. Other places according to the PC side layout. Disadvantages: Large phones display wide web pages, fixed layout width reference is always 320px, resulting in left and right sides of blank.

Second, flow layout

The basic difference between a flow layout and a fixed-width layout is that the site size is measured in percentage instead of PX. The advantage is that the flow layout solves adaptive requirements well. The disadvantage is that you are not flexible enough to add an element and need to change the value of other elements.

3. Bootstrap layout

Bootstrap is a popular responsive front-end framework. The grid system of Bootstrap can be used to achieve responsive mobile terminal layout. Grid system: Bootstrap defines a set of responsive grid system. It is used by dividing a container into 12 columns and controlling the proportion of each column according to the col-XX-XX class name. We set the corresponding div col-LG-2 col-MD-3 col-SM-4 col-XS-6 to complete the layout.

Media query +REM layout

Media queries allow you to load different CSS styles depending on the width of the device. Rem is a relative unit that is calculated based on the font size of the root node, and is mobile responsive using media queries and REM.

Flex layout

Flexbox is a new layout mode introduced by CSS3, also known as elastic layout, which automatically allocates space based on the remaining width of the page. It determines how elements are arranged on the page so that they appear predictably across different screen sizes and devices. It has the ability to expand and contract elements within a Flex container to maximize the amount of space available. Flexbox layouts are best suited for application components and small-scale layouts, while grid layouts are better suited for those with larger scale layouts.

Expand your thinking

What’s the difference between mobile and PC?

(1) the browser compatibility PC, and mobile terminal development considerations are more mobile compatibility, because the android or ios mobile phone, general browsers use is its kernel, so do mobile terminal development, more consideration should be the adaptation of mobile phone resolution, and slightly differentiation of different operating systems.

(2) In the processing of some events, the extra events on the mobile terminal are touch screen events, while the missing event is hover events. In addition, including the mobile end of the pop-up phone keyboard processing, such problems are not encountered in the PC end.

(3) In terms of layout, mobile terminal development is generally to achieve adaptive layout, I have always used REM layout, feel very good.

(4) in animation processing, PC side due to the compatibility of IE, so usually use JS to do animation commonality will be better, but CSS3 made a great sacrifice, and in the mobile phone, if you want to do some animation, special effects, the first choice must be CSS3, is simple, efficient and high.

(5) generally, jquery is used on the PC side and Zepto is used on the mobile side. Because the traffic on the mobile side is more important, the resources or plug-ins introduced can be as small as possible. There is a big difference between a 30K resource and an 80K resource on the mobile side.

(6) For example, the 300ms delay on the mobile phone is not available on the PC side. If we want to make webApp, the 300ms delay is naturally not needed. Therefore, hammer-time.

Reference: blog.csdn.net/nemunemu/ar…