layout	address
Flow layout of mobile WEB development	[HTML+CSS] Flow Layout of Mobile WEB Development_ddddddyu's Blog-CSDN Blog
Flex layout for mobile WEB development	[HTML+CSS] Flex layout for mobile WEB development_ddddddyu's Blog-CSDN Blog
Rem layout of mobile WEB development	[HTML+CSS] rem layout of mobile WEB development_ddddddyu's blog-CSDN blog
Responsive layout of mobile WEB development	[HTML+CSS] Responsive Layout of Mobile WEB Development_ddddddyu's Blog-CSDN Blog

1 Mobile Terminal Basics

Common PC browsers and mobile browsers

The core of domestic mobile browsers is basically Webkit

The mobile terminal is mainly developed for the mobile terminal

Now the fragmentation of the mobile terminal is serious, the resolution and screen size are different, we only focus on px

2 viewports

The viewport is the area of the screen where the browser displays the content of the page. Viewports can be divided into layout viewports, visual viewports, and ideal viewports

We only focus on the ideal viewport

2.1 layout viewport layout viewport

Generally, the browsers of mobile devices have a layout viewport set by default, which is used to solve the problem of displaying early PC-side pages on mobile phones.
iOS and Android basically set the viewport resolution to 980px, so most of the webpages on the PC can be rendered on the mobile phone, but the elements look small, and generally the webpage can be manually zoomed by default.

2.2 visual viewport visual viewport

Literally, it is the area of the website that the user is seeing. Note: is the area of the website
We can manipulate the visual viewport by zooming, but it will not affect the layout viewport, and the layout viewport will still maintain the original width

2.3 ideal viewport ideal viewpor

To put it simply, the website fits the screen size of the mobile phone, and the browser is notified with meta to realize it.
The main purpose of the meta viewport tag: the width of the layout viewport should be consistent with the width of the ideal viewport. The simple understanding is that the width of the device is how wide the viewport of our layout is.

2.4 meta viewport tag

 <meta name="viewport" content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">

Attributes	explain
width	Width sets the width of the viewport, you can set the special value of device-width
initial-scale	Initial zoom ratio, a number greater than 0
maximum-scale	The maximum zoom ratio, a number greater than 0
minimum-scale	The minimum zoom ratio, a number greater than 0
user-scalable	Whether the user can zoom, yes or no (1 or 0)

2.5 Standard viewport settings

The viewport width is consistent with the device: width=device-width
The default zoom ratio of the viewport is 1.0: initial-scale=1.0
Do not allow users to scale themselves: user-scalable=no
Maximum allowed scaling 1.0: maximum-scale=1.0
The minimum allowed scaling factor is 1.0: minimum-scale=1.0

2.6 Summary

The viewport is the area of the screen where the browser displays the content of the page.
Viewports are divided into layout viewport, visual viewport and ideal viewport
What we want for mobile layout is an ideal view (that is, how wide the mobile phone screen is, how wide our layout viewport is)
For an ideal viewport, we need to add a meta viewport tag to our mobile page

3 double image

3.1 Physical Pixel & Physical Pixel Ratio

Physical pixels refer to the smallest particles displayed on the screen, which are physically real. This is set by the manufacturer when leaving the factory, for example, Apple 6\7\8 is 750*1334
1px when we develop is not necessarily equal to 1 physical pixel
On the PC side page, 1 px is equal to 1 physical pixel, but the mobile side is different
The number of physical pixels that can be displayed in a px is called the physical pixel ratio or screen pixel ratio
PC and earlier mobile phone screens/ordinary mobile phone screens: 1 CSS pixel = 1 physical pixel, and the physical pixel ratio is 1. The mobile terminal is different, for example, the physical pixel ratio of iphone6/7/8 is 2.
Retina (retina screen) is a display technology that can compress more physical pixels into one screen, thereby achieving higher resolution and improving the fineness of the screen display.

To put it simply, one px pixel contains two physical pixels, so the prepared picture will not be blurred if the px is twice the original

3.2 Double graph

The prepared picture is 2 times larger than the actual size, which is the double picture

3.3 Double graph solution

We need a 50*50 pixel (CSS pixel) picture, which will be enlarged by 2 times and 100*100 will be blurred if it is directly placed in the iphone8.
What we take is to put a 100*100 picture and then manually reduce the picture to 50*50 (css pixels)
The picture we prepared is 2 times larger than the size we actually need, and this is the way to double the picture

3.4 Background scaling background-size

The background-size attribute specifies the size of the background image

background-size: 背景图片宽度 背景图片高度；

Unit: length|percentage|cover|contain
cover expands the background image to be large enough so that the background image completely covers the background area
contain expands the image image to its maximum size so that its width and height fit perfectly within the content area

5 Mobile Technology Solutions

Separately make mobile pages (Jingdong, tb), responsive pages are compatible with mobile terminals (Samsung)

We can safely use H5 and CSS3 styles in mobile browsers

At the same time, we only need to consider adding webkit to the private prefix of our browser.

5.1 CSS initialization

It is recommended to use normalize.css for mobile initialization. Official website: Normalize.css: Make browsers render all elements more consistently. https://necolas.github.io/normalize.css/

5.2 CSS3 box model box-sizing

Traditional box model width calculation: box width = width + border + padding set in CSS
CSS3 traditional box model: box width = width set in CSS (including border+padding).
In other words, the padding and border of the CSS3 box model will no longer support the big box

/* CSS3盒子模型 */
box-sizing: border-box;
/* 传统盒子模型 */
box-sizing: content-box;

Choose the CSS3 box model on the mobile side

Choose traditional on the PC side, and choose CSS3 regardless of compatibility

5.3 Special styles

/* CSS3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮需要清除，设置为 transparent 完全透明 */
-webkit-tap-highlight-color: transparent;
/* 在移动端默认外观在ios上加上这个属性才能给按钮和输入框自定义样式 */
-webkit-appearance: none;
/* 禁用长按页面时弹出的菜单 */
img, a {-webkit-touch-callout: none;}

6 Common layouts on mobile terminals

6.1 Create a separate page

Flow Layout (Percentage Layout)
flex elastic layout (strongly recommended)
less + rem + media query layout
mixed layout

6.2 Responsive page compatibility

media query
bootstrap

7 Flow Layout (Percentage Layout)

Set the width of the box to a percentage to scale according to the width of the screen, not limited by fixed pixels, and the content fills to both sides

max-width maximum width (max-height maximum height)
min-width minimum width (min-height minimum height)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            width: 100%;
            max-width: 980px;
            min-width: 320px;
            margin: 0 auto;
        }
        
        section div {
            float: left;
            width: 50%;
            height: 400px;
        }
        
        section div:nth-child(1) {
            background-color: pink;
        }
        
        section div:nth-child(2) {
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

Double image practice

In Firework, the sprite map is scaled to half of the original
Then measure the coordinates according to the size (then measure the x and y coordinates)
Note that the code background-size should also be written: half of the original width of the sprite map

background: url(../images/jd-sprites.png) no-repeat -81px 0;
/* 原始图大小为400px左右 */
background-size: 200px auto;

[HTML+CSS] Flow layout of mobile WEB development