当前位置：网站首页>Mobile layout (flow layout)

Mobile layout (flow layout)

2022-07-02 12:44:00 【By the Difeng River】

List of articles

Standard view label

Insert picture description here

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

Double

Physical pixel & Physical pixel ratio

 Physical pixels refer to the smallest particles displayed on the screen , It's physical reality . This is set by the manufacturer at the factory , Such as apple 6\7\8 yes 750* 1334
 When we were developing 1px Not necessarily equal to 1 A physical pixel of
 PC End page ,1 individual px be equal to 1 A physical pixel of , But the mobile terminal is different
 One px The number of physical pixels that can be displayed , be called Physical pixel ratio or screen pixel ratio
Insert picture description here

Multigraph

For one 50px * 50px Pictures of the , On the cell phone Retina Open in screen , According to the physical pixel ratio just now, the magnification will be , This will cause the picture to blur
 In standard viewport Setting up , Use multipliers to improve image quality , Solve the blur problem in HD devices
 Usually use a double graph , because iPhone 6\7\8 Influence , But there are still 3 Times the figure 4 In the case of multiple graphs , This depends on the actual needs of the development company
 Background image Pay attention to the scaling problem

/*  stay  iphone8  below  */
 img{
    
 /* Original picture 100*100px*/
 width: 50px;
 height: 50px;
 } 
.box{
    
 /* Original picture 100*100px*/
 background-size: 50px 50px;
 }

Background zoom background-size

background-size Property specifies the size of the background image

background-size: Background image width Background image height

Company ： length | percentage |cover|contain;
cover Expand the background image to be large enough , So that the background image completely covers the background area .
contain Expand the image to the maximum size , So that its width and height fully fit the content area

       div {
    
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/dog.jpg) no-repeat;
            /* background-size:  Width of picture   Height of picture ; */
            /* background-size: 500px 200px; */
            /* 1. Just write one parameter   It must be the width   Height is omitted   It scales equally  */
            /* background-size: 500px; */
            /* 2.  The units inside can follow %  Relative to the parent box  */
            /* background-size: 50%; */
            /* 3. cover  Equal scale stretching   To completely cover div The box   Some background pictures may not be fully displayed  */
            /* background-size: cover; */
            /* 4. contain  Stretch in proportion to height and width   When width   Or height   To cover up div The box is no longer stretched   There may be some blank areas  */
            background-size: contain;
        }

Mobile terminal development options

Insert picture description here
Now the common mobile terminal development in the market is Make mobile page separately and Responsive page Two kinds of schemes
Now the mainstream choice in the market is Make mobile page separately

CSS initialization normalize.css

Mobile CSS Initialization recommended normalize.css/
 Normalize.css： Protected valuable defaults
 Normalize.css： Fixed the browser's bug
 Normalize.css： It's modular
 Normalize.css： Have detailed documentation
Official website address ： http://necolas.github.io/normalize.css/

CSS3 Box model box-sizing

 Traditional mode width calculation ： The width of the box = CSS Set in the width + border + padding
 CSS3 Box model ： The width of the box = CSS The width set in width It contains border and padding
in other words , our CSS3 Box model in , padding and border It won't hold a big box

CSS3 Box model
box-sizing: border-box;
Traditional box model
box-sizing: content-box;

Tradition or CSS3 Box model ？

The mobile terminal can all CSS3 Box model
PC If the end needs to be compatible completely , Let's use the traditional mode , If compatibility is not considered , We will choose CSS3 Box model

Special style

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

<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>
        a {
    
            -webkit-tap-highlight-color: transparent;
        }

        input {
    
            -webkit-appearance: none;
        }
    </style>
</head>

<body>
    <a href="#">asdasdas</a>
    <input type="button" value=" Button ">
</body>

</html>

 /*CSS3 Box model */
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 /* Click to highlight that we need to clear   Set to transparent  Complete transparent */
 -webkit-tap-highlight-color: transparent;
 /* The default appearance of the browser on the mobile terminal is iOS Add this property to customize the style of buttons and input boxes */
 -webkit-appearance: none;
 /* Disable the pop-up menu when pressing the page for a long time */
 img,a {
     -webkit-touch-callout: none; }

Fluid layout （ Percentage layout ）

Fluid layout , Namely percentage Layout , Also known as unfixed pixel layout .
Set the width of the box to percentage To scale according to the width of the screen , Not limited by fixed pixels , The content is padded on both sides .
The streaming layout is mobile web The common layout used in development .