Mobile-based streaming layout

Browser status

Common browsers on PC: 360 browser, Google browser, Firefox browser, QQ browser, Baidu browser, Sogou browser, IE browser.

Common browsers on the mobile terminal: UC browser, QQ browser, Oppen browser, Baidu mobile browser, 360 security browser, Google browser, etc.

Summary: Compatible with mainstream mobile browsers, only need to process the webkit kernel

The current state of mobile phone screens

The screen size of mobile devices is very large, and the broken screen is very serious. The common unit is px

Common mobile screen sizes

Insert picture description here

Mobile debugging method

Insert picture description here
to sum up

The mobile browser is mainly aimed at the webkit core
Common mobile terminals are mainly aimed at mobile terminal development
The broken screen of the mobile terminal is very serious, the resolution and the screen size are different
Learn to use Google browser to simulate mobile phone interface and debugging

Viewport

The browser is the area of the screen where the page is displayed

Viewport: layout viewport visual viewport ideal viewport

Layout viewport

Mainly to solve the problem of early pc page display on mobile phones, basically set the resolution of the viewport to 980px

Visual viewport

The area of the website does not affect the layout viewport

Ideal viewport

The ideal viewport is the appropriate viewport size for the device
To manually add meta viewport tags to manipulate the viewport
Simply understand how wide the device is and how wide the layout viewport is

to sum up

The viewport is the area of the screen where the browser displays the page.
Viewport: layout viewport visual viewport ideal viewport
The ideal viewport is the most suitable viewport size for the device. Simple understanding: how wide the device is, how wide the layout viewport is

meta tag

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

Note: The viewport label must be added on the mobile terminal, otherwise there will be many problems in the development of the mobile terminal

Standard viewport

The width of the device should be consistent with the width of the viewport
No zoom
The initial zoom ratio is 1
The maximum zoom ratio is 1
The minimum zoom ratio is 1

Physical pixel to physical pixel ratio

The physical pixel refers to the smallest particle displayed on the screen, which is physically real
During the development process, 1px is equal to 1 physical pixel on the PC side, but on the mobile side, 1px is not equal to 1 physical pixel.
1px is equal to the number of physical pixels, which is called the physical pixel ratio

早期的移动端开发，1px等于1个物理像素点，随着视网膜技术的出现，将更多的物理像素点压缩至一块屏幕中，提高屏幕的分辨率，使屏幕看起来更加清晰`

Multiple graph

In actual development, the image will be magnified n times in the retina screen

The image we prepared is n times larger than the actual image, and then manually reduced by n times, so that the image will no longer be blurred


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img:nth-of-type(2) {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 在移动端的实际开发过程中，我们准备的图像比实际的图像大n倍，然后再手动缩小原来的n倍，即可解决图像模糊的问题 -->
    <!-- 50*50的图像 -->
    <img src="./img/apple50(1).jpg" alt="">
    <!-- 100*100的图像 -->
    <img src="./img/apple100.jpg" alt="">

</body>

</html>

Insert picture description here

Background image

background-size: specifies the size of the background image

Unit: length | percentage | conver | contain
cover: The background image is expanded to be large enough so that the background image can completely cover the background area.
contain: The background image is expanded to the maximum size, so that its height and width are fully adapted to the content area

Note: Only write one unit, the default is width

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            margin: 0px auto;
            background: url(./img/picture.jpg) no-repeat;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

Insert picture description here

Background multiple

It is consistent with the practice of multiple images, but the container should be reduced to the same background image

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            /* 背景图像：100*100 */
            background: url(./img/apple100.jpg) no-repeat;
            margin: 0px auto;
            background-size: 50px 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

Insert picture description here

Mobile development options

Make a separate mobile page

JD Mall mobile version
Taobao touch screen version
Suning Tesco Mobile Edition

Add m in front of the website area to open the mobile page

Insert picture description here

Responsive page and mobile terminal

Samsung official website

Insert picture description here Core: Change the style according to the width of the screen to adapt to different terminals

Responsive page production is more troublesome and requires a lot of effort to adjust compatibility issues

to sum up

Compatible with mobile pages only need to be compatible with the webkit kernel
You can use the new features of h5 and css3 with confidence
The private prefix of the browser only needs to add webkit

Mobile technology solutions

Introduce css initialization style: normalize.css

Insert picture description here
Official download: https://necolas.github.io/normalize.css/8.0.1/normalize.css

Special style

CSS box model

Traditional box model: the width of the box = width + padding + border
css3 box model: the width of the box = width(border+padding)

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

Note: The mobile terminal can safely use the css3 box model, and the pc terminal can also use the css3 box model if compatibility is not considered


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 800px;
            padding: 20px;
            margin: 20px auto;
            background-color: purple;
            border: 5px solid red;
            /* 引进css3盒子模型 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

Insert picture description here

Remove highlight effect

-webkit-tap-highlight-color: transparent;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            -webkit-tap-highlight-color: transparent;
        }
    </style>
</head>

<body>
    <a href="#">尧子陌</a>
</body>

</html>

Insert picture description here

Button custom style

-webkit-appearance: none;


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        input {
            -webkit-appearance: none;
        }
    </style>
</head>

<body>
    <input type="button" value="尧子陌">
</body>

</html>

Insert picture description here

Prohibit page long press pop-up menu

-webkit-touch-callout: none;


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img,
        a {
            -webkit-touch-callout: none;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <img src="./img/apple100.jpg" alt="">
    <a href="https://www.baidu.com/">百度</a>
</body>

</html>

Insert picture description here

Common layout on mobile

Separate production of mobile pages (mainstream)

Percentage layout
flex layout
rem + less + media query
Mixed layout

Responsive pages compatible with mobile terminals

Media inquiries
bootstarp

Flow layout

Flow layout: percentage layout, also known as non-pixel fixed layout
The width is set as a percentage, not limited by fixed pixels, and the content extends to both sides
Percentage layout is a common layout method for mobile web development


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            width: 100%;
            max-width: 640px;
            min-width: 320px;
            margin: 100px auto;
            border: 1px solid red;
        }
        
        div {
            width: 50%;
            float: left;
            height: 150px;
            background-color: rgb(223, 25, 25);
        }
        
        div:nth-of-type(2) {
            background-color: purple;
        }
    </style>
</head>

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

</html>

Insert picture description here