Mobile WEB development

1, Mobile terminal Foundation

1. Browser status

(1) Common browser on PC

360, Google, Firefox, QQ, Baidu, Sogou, IE

(2) Common mobile browsers

UC, QQ, oppen Opera, baidu mobile, 360 security, Google, Sogou, cheetah, etc

Domestic UC, QQ, Baidu and other mobile browsers are modified cores based on Webkit. There is no independently developed kernel in China, just as domestic mobile operating systems are modified and developed based on Android.

Summary: compatible with mainstream mobile browsers, just handle Webkit kernel browsers.

2. Current situation of mobile phone screen

• The screen size of mobile devices is very large and seriously fragmented
• Android devices have multiple resolutions: 480 × 800,480 × 854,540 × 960,720 × 1280,1080 × 1920, and the legendary 2K and 4K screens
• In recent years, the fragmentation of the iPhone has also intensified. The main resolution of the device is 640 × 960,640 × 1136,750 × 1334,1242 × 2208, etc
• As developers, we don't need to pay attention to these resolutions, because our common size unit is px

3. Common mobile terminal screen size

Refer to: Common mobile terminal screen size

As a front-end developer, it is not recommended to tangle with dp, dpi, pt, ppi and other units.

4. Mobile terminal debugging method

• Analog phone debugging of chrome devtools
• Build a local web server. The mobile phone and the server are in the same LAN, and access the server through the mobile phone
• Use an Internet server to access directly through IP or domain name

2, Viewport

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

1. Layout viewport layout viewport

• Generally, the browser of mobile devices has a layout viewport by default, which is used to solve the problem of displaying early PC pages on the mobile phone
• IOS and Android basically set the viewport resolution to 980px, so most web pages on PC can be rendered on mobile phones, but the elements look very small. Generally, by default, you can manually zoom the web pages

2. visual viewport

• Literally, it is the area of the website that the user is seeing. Note: This is the area of the site
• We can manipulate the visual viewport by zooming, but it will not affect the layout viewport. The layout viewport still maintains its original width

3. ideal viewport

• It is set to make the website have the most ideal browsing and reading width on the mobile terminal
• The ideal viewport is the most ideal viewport size for the device
• You need to manually fill in the meta viewport label to notify the browser of the operation
• The main purpose of meta viewport label: the width of the layout viewport should be consistent with the width of the ideal viewport. A simple understanding is that the width of the device is as wide as the viewport of our layout

4. meta viewport labels

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

attribute	interpretative statement
width	Width sets the width of the viewport. You can set the device width special value
initial-scale	Initial zoom ratio, a number greater than 0
maximum-scale	Maximum zoom ratio
minimum-scale	Minimum zoom ratio
user-scalable	Whether the user can zoom, yes or no(1 or 0)

Standard viewport settings

1. The viewport width is consistent with the device width
2. The default zoom ratio for viewports is 1.0
3. Users are not allowed to scale themselves
4. The maximum allowed zoom ratio is 1.0
5. Minimum allowable zoom ratio 1.0

3, Double graph

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 at the factory. For example, Apple 6, 7 and 8 are 750 * 1334

• During development, 1px is not necessarily equal to 1 Physical pixel

• On the PC side, 1px is equal to 1 Physical pixel, but the mobile side is different

• The number of physical pixels that a px can display is called physical pixel ratio or screen pixel ratio (the development size is displayed in Google debugging tool)

  For example, in iPhone 8: 1px development pixels = 2px physical pixels

Why does the physical pixel ratio in the mobile phone not be 1?

• PC terminal and early mobile phone screen / ordinary mobile phone screen: 1CSS pixel = 1 Physical pixel
• Retina (retina screen) is a display technology, which can compress more physical pixels into one screen, so as to achieve higher resolution and improve the fineness of screen display

2. Multiple graph

• For a 50px × A 50px picture is opened in the Retina screen of the mobile phone. It will be magnified according to the physical pixel ratio just now, which will cause the picture to be blurred
• In the standard viewport settings, the image magnification is used to improve the image quality and solve the blur problem in HD devices
• A double image is usually used because of the impact of iPhone 6 (the physical pixel ratio is 2.0). However, there are still 3-fold and 4-fold graphs, depending on the actual development requirements
• Pay attention to the scaling of background pictures

(1) Practice of double graph:

/* We need a picture of 50 * 50 pixels (css pixels) */
/* If you put it directly into the iPhone 8, it will enlarge twice and the 100 * 100 picture will become blurred */
/* Put a 100 * 100 picture directly, and then manually reduce the picture to 50*50(css pixels) */
/* That is, the picture we prepared is twice the size of the actual picture. This is the double picture */

(2) Background scale background size

Specify the size of the background picture

background-size: 500px 300px;
background-size: 500px;
background-size: 50%;
/* cover To completely cover the div box, some background pictures may not be displayed completely */
background-size: cover;
/* contain When the height or width of the div box is covered, it is no longer stretched, and the div box may be partially empty */
background-size: contain;

The background image also needs to be doubled to avoid the effect of image blur.

Using cuterman, you can easily cut out 1-fold, 2-fold and 3-fold graphs.

4, Mobile terminal development selection

1. Mainstream mobile solutions

(1) Make mobile terminal page separately (mainstream)

For example: Jingdong Mall mobile version, Taobao touch screen version, Suning Tesco mobile version

Usually, the mobile terminal can be opened by adding m(mobile) in front of the website domain name. By judging the device, if the mobile terminal is opened, skip to the mobile terminal page.

m.jd.com

(2) Responsive pages are compatible with mobile terminals (second)

Samsung mobile official website

Change the style by judging the screen width to adapt to different terminals** Disadvantages: * * the production is troublesome and requires a lot of effort to adjust the compatibility problem.

5, Mobile terminal technology solutions

Mobile browsers are basically based on webkit kernel, so we consider webkit compatibility. We can safely use H5 tags and CSS3 styles.

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

1. CSS initialize normalize.css

It is recommended to use normalize.css for mobile terminal CSS initialization. Official website address: normalize.css official website

• Valuable defaults are protected
• Fixed a bug in the browser
• It is modular
• Have detailed documentation

2. CSS3 box model box sizing

• Traditional model width calculation: box width = width + border + padding set in CSS

• CSS3 box model: box width = width set in CSS, including border and padding

  In other words, CSS3 box model, padding and border will not support the big box

Traditional box model box-sizing: content-box;  Calculate width from content
/* Traditional box model = width + border + padding */
        div:nth-child(1) {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid red;
        }

CSS3 Box model box-sizing: border-box;  Calculate width from border
/* CSS3 Box model */
        div:nth-child(2) {
            /* With this sentence, the box becomes a CSS3 box model */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* padding And border values will not support the CSS3 box */
            padding: 10px;
            border: 10px solid red;
        }

3. Special style of mobile terminal

(1)CSS box model

-webkit-box-sizing: border-box;

(2) Clear highlight

-webkit-tap-highlight-color: transparent;

(3) Clear default styles for buttons and input boxes

-webkit-appearance: none;

(4) Disable the pop-up menu when long pressing the page

img,a {-webkit-touch-callout: none;}

6, Common layout of mobile terminal

1. Mobile terminal technology selection

(1) Make mobile terminal page separately (mainstream)

• Streaming layout (percentage layout)
• flex flexible layout (highly recommended)
• less+rem + media query layout
• Hybrid layout

(2) Responsive pages are compatible with mobile terminals (second)

• Media query
• bootstarp

2. Streaming layout (percentage layout)

A streaming layout is a percentage layout, also known as a non fixed pixel layout. By setting the width of the box as a percentage, it can be scaled according to the width of the screen, which is not limited by fixed pixels, and the content is filled on both sides. Churn layout is a common layout used in mobile web development.

section {
    width: 100%;
    max-width: 980px;
    min-width: 320px;
}

section div {
    float: left;
    width: 50%;
    height: 400px;
}

• Each element accounts for 50%
• However, in order to protect the content, we need to set the maximum width and minimum width to prevent over scaling

JD mobile terminal home page demo

(1) Technology selection

Make mobile page scheme separately; Streaming layout.

(2) Build folder

JD - > CSS \ images \ upload \ index.html

(3) Setting viewport labels and introducing initialization styles

Viewport labels:

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

Initialize style:

	<!-- introduce css Initialization file -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- Introduction of home page css -->
    <link rel="stylesheet" href="css/index.css">

(4) Double sprite drawing method

• First, scale the sprite map to half of the original scale
• Then measure the coordinates according to the size
• Note that the background size in the code should also be written: half the original width of the sprite diagram

(5) Picture format

• DPG picture compression technology

  JD independently developed and launched DPG image compression technology. After testing, this technology can save nearly 50% of users' browsing traffic and greatly improve users' web page opening speed.

  It is compatible with jpeg and realizes the compatibility of the whole platform and the whole browser. There is no difference between the definition of the compressed image and webp.

• webp picture format

  A picture format developed by Google to speed up picture loading.

  The image compression volume is only 2 / 3 of jpeg, and can save a lot of server broadband resources and data space.

3. flex layout

(1) Traditional layout and flex layout

• Traditional layout

  Good compatibility

  Cumbersome layout

  Limitations, can not be well arranged at the mobile end

• flex flexible layout

  Convenient operation, extremely simple layout and wide application of mobile terminal

  Poor PC browser support

  IE11 or lower, not supported or only partially supported

(2)flex layout principle

Flex is the abbreviation of flexible Box, which means "flexible layout". It is used to provide maximum flexibility for the box model. Any container can be specified as flex layout.

• When we set the flex layout for the parent box, the float, clear, and vertical align attributes of the child elements will become invalid.
• Telescopic layout = elastic layout = telescopic box layout = elastic layout = flex layout

Elements with flex layout are called flex containers, or "containers" for short, and all child elements automatically become container members, called flex items, or "items" for short.

		div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }

        div span {
            /* width: 150px; */
            flex: 1;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }

• div is the parent container of flex
• span is the sub container flex item
• Sub containers can be arranged horizontally or vertically

Summarize the flex layout principle:

By adding the flex attribute to the parent box, you can control the position and arrangement of the child boxes.

(3) Common properties of flex layout parent

The following six attributes are set for the parent element:

attribute	explain
flex-direction	Set spindle direction
justify-content	Sets the arrangement of child elements on the spindle
flex-wrap	Sets whether child elements wrap. By default, there is no line break
align-content	Sets the arrangement of child elements on the side axis (multiple rows)
align-items	Set the arrangement of child elements on the side axis (single line)
flex-flow	Composite attribute, which is equivalent to setting flex direction and flex wrap at the same time

1. Main shaft VS side shaft

In flex layout, it is divided into two directions: main axis and side axis. The same name is row and column, x axis and y axis

• The default spindle direction is the x-axis direction, horizontal to the right
• The default side axis direction is the y-axis direction, vertically downward

/* Add flex attribute to parent */
display: flex;
/* The default principal axis is the x-axis row; Then the y axis is the side axis */
/* Elements are arranged along the main axis */
flex-direction: row;
/* flex-direction: row-reverse;  Simple understanding right to left */
/* You can set the spindle to the y axis, and the x axis becomes the side axis */
flex-direction: column;

2. Justify content

Note: before using this attribute, be sure to determine which is the spindle

Attribute value	explain
flex-start	Default, starting from scratch, left to right if the x-axis is the spindle
flex-end	Arrange from the tail
center	Align in the center of the spindle (if the spindle is x-axis, center horizontally)
space-around	Divide the remaining space equally
space-between	Edge both sides first, and then divide the remaining space equally (important)

/* The default principal axis is the x-axis row  */
            flex-direction: row;
            /* justify-content:  Sets the arrangement of child elements on the spindle */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* Align child elements to center */
            /* justify-content: center; */
            /* Average residual space */
            /* justify-content: space-around; */
            /* Trim both sides first, and then allocate the remaining space */
            justify-content: space-between;

/* Set the spindle to y-axis column  */
            flex-direction: column;
            justify-content: center;
            justify-content: space-between;

3. Flex wrap sets whether child elements wrap

By default, projects are arranged on a single line, also known as a grid line. As defined by the flex wrap attribute, there is no newline in the flex layout by default. If not, the width of the child element will be reduced.

The default is no newline, which can be set through flex wrap.

/* flex In the layout, the default child element does not wrap */
/* flex-wrap: nowrap; */
flex-wrap: wrap;

4. Align items sets the arrangement method of side axis sub elements (single line)

This attribute controls the arrangement of children on the side axis. It is used when the children are single items.

attribute	explain
flex-start	From top to bottom
flex-end	From bottom to top
center	Squeeze together and center (vertical center)
stretch	Stretch (default)

/* The default principal axis is the x-axis row  */
justify-content: center;
/* Side axis centering required */
align-items: center;

align-items: flex-start;
/* Stretch, but don't give height to the sub box */
align-items: stretch;

Stretching causes the child box to stretch to the same height as the parent box along the side axis.

/* Set the spindle to y-axis */
flex-direction: column;
justify-content: center;
align-items: center;

/* If the main axis is y-axis, the sub box shall not be given width during stretching */
align-items: stretch;

5. Align content sets the arrangement mode (multiple lines) of child elements on the side axis

Set the arrangement mode of sub items on the side axis, which can only be used when sub items break lines (multiple lines). It has no effect in a single line.

Attribute value	explain
flex-start	By default, the arrangement starts from the head of the side shaft
flex-end	Start from the tail of the side shaft
center	Displayed in the middle of the side axis
space-around	Children divide the remaining space equally on the side axis
space-between	The subitems are first distributed at both ends on the side axis, and then the remaining space is divided equally
stretch	Sets the height of the child element and bisects the height of the parent element

/* Line feed */
flex-wrap: wrap;
/* Because of line feed, we use align content to set the alignment of side axis sub elements */
/* align-content: flex-start; */
/* align-content: center; */
/* align-content: space-around; */
align-content: space-between;

6.flex-flow

The flex flow attribute is a composite of the flex direction and flex wrap attributes.

/* flex-direction: column;
flex-wrap: wrap; */
/* Abbreviate the setting of spindle direction and whether to wrap (or column) */
flex-flow: column wrap;

(4) Common properties of flex layout children

attribute	explain
flex	Share of subproject
align-self	Controls how children are arranged on the side axis
order	Defines the order in which children are arranged (before and after)

1.flex attribute

The flex attribute defines the remaining space allocated by the sub project, and the number of copies is represented by flex. The default is 0

		section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
            flex: 1;
            background-color: purple;
            margin: 0 10px;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: skyblue;
        }

The left and right boxes are fixed, and the middle box adapts to the width.

The larger the value, the more copies are allocated.

There are 3 span s in total, 1 and 3 respectively, and 2 are exclusive.

		p span {
            flex: 1;
        }

        p span:nth-child(2) {
            flex: 2;
            background-color: purple;
        }

2. Align self controls the arrangement of sub items on the side axis

The align self attribute allows a single item to have a different alignment from other items, and can override the align items attribute.

The default value is auto, which means that it inherits the align items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

/* Just let box 3 down to the bottom */
div span:nth-child(3) {
	align-self: flex-end;
}

3. The order attribute defines the order of items

The smaller the value, the higher the arrangement. The default value is 0. Note: it is different from z-index.

div span:nth-child(2) {
    /* The default is 0. The smaller the value, the higher the value */
    order: -1;
}

Without changing the structure, modify the order of items through style properties.

Ctrip homepage demo

Visit address: m.ctrip.com

Adopt the scheme of making mobile pages separately and adopt flex layout.

1. Common flex layout ideas: first set the main axis to the y axis, and then align it in the center along the side axis. Pictures and text can be displayed up and down.

2. Element and set flex:1; And display:flex; Is non conflicting, acting both as a parent element and as a child element.

3. Background linear gradient:

   Background: linear gradient (starting direction, color 1, color 2,...);

   background: -webkit-linear-gradient(left, red, blue);

   div {
       width: 600px;
       height: 200px;
       /* The background gradient must be prefixed with a browser private prefix */
       background: -webkit-linear-gradient(left, red, blue);
       /* The starting position can be a position noun, a degree, or omitted. It starts from top by default */
       background: -webkit-linear-gradient(red, blue);
       background: -webkit-linear-gradient(top left, red, blue);
   }
   

4. rem adaptive layout

(1)rem unit

rem unit: rem(root em) is a relative unit, similar to em. EM is the font size of the parent element.

The difference is that the benchmark of REM is the font size relative to html elements. For example, the root element (html) is set to font size = 12px; Set width=2rem for non root elements; Then replace it with Px, which means 24px.

		html {
            font-size: 14px;
        }

        div {
            font-size: 12px;
        }

        p {
            /* 1.em Is the font size relative to the parent element div */
            width: 10em;
            height: 10em;
            /* 2.rem Is the font size relative to the root element html */
            width: 10rem;
            height: 10rem;
            background-color: pink;
        }

**Advantages of rem: * * you can change the size of elements in the page by modifying the text size in html, which can be controlled as a whole.

(2) Media query syntax

Media query is a new syntax for CSS3.

• @media can set different styles for different screen sizes

  @media mediatype and|not|only (media feature) {CSS-code;}

• @Pay attention to the @ symbol at the beginning of media

• mediatype media type

• Keyword and not only

• The media feature must be contained in parentheses

1.mediatype query type

Different terminal devices are divided into different types, which are called media types.

value	explain
all	All equipment
print	Printer and print preview
screen	Computer screen, tablet, smartphone, etc

2. Keywords

Keyword connects media types or multiple media properties together as a condition for media query.

keyword	explain
and	Multiple media features can be connected together, equivalent to "and"
not	Excluding a media type is equivalent to "not"
only	Specify a specific media type, which can be omitted

3. Media characteristics

Each media type has its own different characteristics, and different display styles are set according to the characteristics of different media types. Note that parentheses should be used for inclusion.

value	explain
width	Defines the width of the visible area of the page in the output device
min-width	Minimum width
max-width	Maximum width

/* 1.Media queries are generally performed from large to small or from small to large */
        /* The background color of pages smaller than 540px changes to blue */
        @media screen and (max-width: 539px) {
            body {
                background-color: skyblue;
            }
        }

        /* 540-970px Change to green */
        @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        }

        /* Greater than or equal to 970px changed to red */
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }

From small to large, you can use the cascading nature of CSS to simplify the code. The last greater than or equal to 970px will stack the greater than or equal to 970px of the greater than or equal to 540px.

/* Simplified code */
        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }

(3) Media query + rem to realize dynamic size change of elements

rem units follow html. With rem page elements, you can set different sizes. Media query can modify the style according to different device widths. Media query + rem can realize different device widths and realize the dynamic change of page element size.

		@media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }

        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }

        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }

(4) Introduce resources

When there are many styles, you can use different stylesheets for different media. Directly judge the size of the device in link, and then introduce different css files.

	<style>
        /* When the screen is less than 640px, let div display 1 in one line */
        /* When the screen is greater than or equal to 640px, let div display 2 in one line */
        /* Introducing resources is to call different css files for different screen sizes */
    </style>
    <link rel="stylesheet" href="css/style320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="css/style640.css" media="screen and (min-width: 640px)">

(5)less Foundation

Why learn less?

Maintain CSS disadvantages. CSS is a non procedural language without the concepts of variables, functions, scope, etc.

• CSS needs to write a lot of seemingly illogical code, and CSS has high redundancy.
• Inconvenient for maintenance and expansion, not conducive to reuse.
• CSS does not have good computing power.
• Non front-end development engineers often find it difficult to write well-organized and easy to maintain CSS code projects because of lack of CSS writing experience.

Less(Leaner Style Sheets) is a CSS extension language, also known as CSS preprocessor. Common CSS preprocessors include Sass and Stylus

As an extension of CSS, it does not reduce the function of CSS, but adds the feature of procedural language to CSS in the existing CSS syntax. On the basis of CSS syntax, it introduces functions such as variables, mixins, operations and functions, which greatly simplifies the writing of CSS and reduces the cost of CSS maintenance.

Less Chinese website: Less official website

(6)less use

First, create a new file with the suffix less, and write the less statement in the less file.

1.less variable

A variable is a variable that has no fixed value and can be changed. Because some colors and values in CSS are often used.

@Variable name: value;

Naming convention: it must be prefixed with @ and cannot contain special characters. It cannot start with a number and is case sensitive.

@color: pink; @font14: 14px;

@color: deeppink;
@font14: 14px;
body {
    background-color: @color;
}
div {
    color: @color;
    font-size: @font14;
}

In this way, if you want to modify the color, you only need to modify the color variable, which is convenient for maintenance.

2.less compilation

The vscode Less plug-in Easy LESS plug-in is used to compile less files into css files. After installation, as long as the less file is saved, the css file will be automatically generated.

3.less nesting

Descendant selector, the style of the child element is written directly to the parent element.

.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    a {
        color: red;
    }
}

If there are pseudo class selector, pseudo element selector and intersection selector, the inner selector needs to be preceded by &.

// If there are pseudo class selector, pseudo element selector and intersection selector, the inner selector needs to be added in front of it&
a {
    color: red;
    &:hover {
    	color: blue;
    }
}
.nav {
    &::before {
        content: '';
    }
}

4.less operation

Any number, color or variable can participate in the operation. less provides addition (+), subtraction (-), multiplication (*) and division (/).

@baseFont: 50px;
html {
    font-size: @baseFont;
}

@border: 5px + 5px;
div {
    // Two numbers participate in the operation. If only one number has a unit, the final result shall be subject to this unit
    width: 200px - 50;
    height: 200px * 2;
    border: @border solid red;
}
img {
    // Two numbers participate in the operation. If the two number units are different, the first unit shall prevail
    width: (82rem / @baseFont);
    height: (82rem / @baseFont);
}

• Two numbers participate in the operation. If only one number has a unit, the final result shall be subject to this unit
• Two numbers participate in the operation. If the two number units are different, the first unit shall prevail

(7)rem actual development adaptation scheme

1. Dynamically calculate and set the font size of html and tags according to the ratio of design draft to equipment width( Media query)
2. In CSS, the values of width, height and relative position of design elements are converted into rem in the same proportion;

Technical solution 1: less + media query + rem

Common dimensions and width of design draft:

equipment	Common width
iPhone 4/5	640px
iPhone 6/7/8	750px
Android	Common 320px, 360px, 375px, 384px, 400px, 414px, 500px and 720px. Most 4.7 ~ 5-inch Android devices are 720px

Generally, we use one or two sets of renderings to adapt to most screens, abandon extreme screens or degrade them gracefully, and sacrifice some effects. Now it is basically 750.

Element size value method

1. Formula: rem value of page element = px value of page element / (screen width / number of copies divided)
2. Font size of html = screen width / number of copies divided
3. That is, rem value of page element = px value of page element / (HTML font size)

specific

1. First, select a set of standard size 750px

2. Use the screen size / number of copies divided (750px/15=50) to get the text size in html

3. Page element rem value = page element px value under 750 pixel width / text size in html

Technical solution 2: flexible.js + rem is simpler

flexible.js is a simple and efficient mobile terminal adaptation library launched by the mobile Taobao team. There is no need to write media queries on different screens because JS handles them. The principle is to divide the current equipment into 10 equal parts, but the proportion is the same under different equipment.

All we have to do is determine the html text size of the current device. For example, if the current design draft is 750px, we only need to set the html text size to 75px(750px / 10); Then the rem value of the inner element = PX value of the page element / 75, and the rest should be handed over to flexible.js for calculation.

Download address of flexible.js: https://github.com/amfe/lib-flexible

Among them, index.js is uncompressed and index.min.js is compressed.

Use adaptation scheme 1 to make Suning homepage demo

Website: m.suning.com

Make the mobile page scheme separately + adopt rem adaptive layout (less+rem + media query) + the design drawing adopts 750px design size

1.common.less is used to store public styles, set common screen sizes, and modify the size of html text inside. First, default to an html text size, and then stack the attribute style according to the screen size.

// If the screen size is larger than 750px, directly limit the default html font size to 50px, and then stack this attribute
html {
    font-size: 50px;
}

// The number of divided shares is defined as 15
@no: 15;
// 320px
@media screen and (min-width: 320px) {
    html {
        font-size: (320px / @no);
    }    
}
......

Screen sizes: 320px, 360px, 375px, 384px, 400px, 414px, 424px, 480px, 540px, 720px, 750px

2. Import the common.css just set in index.less

@import "common"; Later, you only need to introduce index.css into the html page.

Use adaptation scheme 2 to make Suning homepage demo

Adopt the scheme of making mobile terminal page separately + rem adaptive layout 2(flexible.js + rem) + the design drawing adopts 750px design size

1. Import flexible.js file

<script src="js/flexible.js"></script>

2.vscode px to rem plug-in cssrem

The default html text size of the cssrem plug-in is cssroot 16px, so you need to manually set the cssroot font to 75px.

Setting method: open the set preferences button in vscode, click settings, search cssroot in the search box, and then manually modify it to 75px. Note that you want to modify cssroot in the workspace.

3. If the screen exceeds 750px, it will be displayed according to the 750 design draft, and the page will not exceed 750px

/* If the screen exceeds 750px, it will be displayed according to the 750 design, and the page will not exceed 750px */
/* If the screen size is greater than 750px, force the font size in html to 75px */
@media screen and (min-width: 750px) {
    html {
        font-size: 75px!important;
    }
}

Here, the media query is used to measure the screen size, and the important is used to improve the weight.

5. Responsive layout

(1) Principle of responsive development

Media query is used to set the layout and style for devices with different widths, so as to adapt to the purpose of different devices.

Equipment division	Dimension interval
Ultra small screen (mobile phone)	size < 768px
Small screen device (flat panel)	768px <= size < 992px
Medium screen (desktop display)	992px <= size <1200px
Widescreen device (large desktop display)	size >= 1200px

(2) Responsive layout container

The response requires a parent as the layout container to match the child elements to achieve the change effect.

In different screens, change the size of the layout container through media query, and then change the arrangement and size of sub elements in it, so as to see different page layout and style changes in different screens.

Common responsive sizing

• Ultra small screen: width: 100%;
• Small screen: width: 750px( It is smaller than the actual screen size in order to leave white space for better visual effect)
• Medium screen: width: 970px;
• Large screen: width: 1170px;

		.container {
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        /* Ultra small screen less than 768 layout container width set to 100% */
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
        }

        /* The small screen is 768 or larger, and the width is 750px */
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
            }
        }

        /* Medium screen is greater than or equal to 992px, and the width is modified to 970px */
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
            }
        }

        /* The large screen is greater than or equal to 1200px, and the width is modified to 1170px */
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }

(3) Responsive navigation demo

• When the screen size is greater than or equal to 768px, the width of the container for layout is 750px
• The container contains 8 li. The width of each Li is 93.75px(750 / 8) and the height is 30px. It is displayed in a floating line
• When the screen size is less than 768px, the container width is set to 100%
• The width of li inside is changed to 33.33%, so that only 3 li can be displayed in each line, and the rest will be displayed on a new line

		.container {
            width: 750px;
            margin: 0 auto;
        }

        .container ul li {
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }

        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
            .container li {
                width: 33.3%;
            }
        }

6. Bootstrap framework

(1) Introduction

Bootstrap comes from twitter (twitter). It is the most popular front-end framework at present. It is based on HTML, CSS and JAVASCRIPT. It is simple and flexible, making WEB development faster.

• Chinese official website: http://www.bootcss.com
• Official website: http://getbootstrap.com/

Framework: it is a set of architecture. It has a relatively complete set of web page function solutions, and the control is in the framework itself, including prefabricated style libraries, components and plug-ins. Users should develop according to some specification specified in the framework.

(2) Advantages

• Standardized html+css coding specification
• It provides a set of simple, intuitive and powerful components
• It has its own ecosystem, which is constantly updated and iterated
• It makes the development easier and improves the development efficiency

At present, v3.0 is the most used version, which is stable, but IE6-IE7 is abandoned. It supports IE8, but the interface effect is not good. It prefers to develop WEB projects with responsive layout and mobile device priority.

(3)Bootstrap usage

Trilogy: 1. Create folder structure 2. Create html skeleton structure 3. Introduce relevant style files 4. Write content

1. When creating a folder structure, a Bootstrap folder should be created separately to store the css+js+fonts of Bootstrap

2. Create html skeleton structure

   <!-- Require the current page to use IE The highest kernel version of the browser edge Render -->
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
   <!-- solve ie9 The following browser pairs html5 The new label is not recognized, resulting in CSS Problems that don't work -->
   <!-- solve ie9 The following browser pairs CSS3 Media Query Unrecognized -->
   <!--[if lt IE 9]>
           <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
           <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
   <![endif]-->
   

3. Import related style files

   <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">

4. Writing content

   • You can directly use the predefined styles of Bootstrap

     <button type="button" class="btn btn-success">Success</button>

   • Modify the original Bootstrap style, but pay attention to the weight

     < div class = "BTN BTN success login" > login succeeded < / div >

     /* Overwrite the original style with your own style */
             .login {
                 width: 100px;
                 height: 45px;
             }
     

   • The key to learning Bootstrap well is to know what styles it defines and what effects these styles can achieve

(4)Bootstrap layout container

Bootstrap needs to wrap a. Container container for page content and grid system. Bootstrap defines this class in advance, called. Container, which provides two useful classes.

1.container class

Container with responsive layout, fixed width. The parameter settings are the same as those in the previous responsive layout.

2. Container fluid class

• Flow layout container 100% width
• A container that occupies all viewports
• It is suitable for mobile terminal development alone

(5)Bootstrap grid system

1. Introduction to grid system

Grid systems, also known as "grid system", divides the page content into equal width columns, and then modularizes the page layout through the definition of the number of columns.

Bootstrap provides a responsive, mobile device first streaming grid system. With the increase of screen or viewport size, the system will be automatically divided into up to 12 columns. The width of the container inside is fixed, but the width of the container is different under different screens. Then divide the container into 12 equal parts.

Note: Although this is somewhat similar to rem, rem divides the whole window into several equal parts, and here is to divide the page content container box.

2. Simple use of grid system

The grid system is used to create a page layout through a combination of rows and columns, and the content can be put into these created layouts.

	Ultra small screen (mobile phone)	Small screen device (flat panel)	Medium screen (desktop display)	Widescreen device (large desktop display)
. container maximum width	Automatic 100%	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
Number of columns			12

• row must be placed in the container layout container

• To achieve the average partition of columns, you need to add a class prefix to the columns

• XS extra small: ultra small; Small: small; MD medium: medium; LG large: large;

• If the column column is greater than 12, the elements of the redundant columns will be arranged in another row as a whole

• Each column has about 15px padding by default. If you don't want it, you can force it to be removed through CSS

  row removes the left and right 15px margins of the parent container

• You can specify the class names of multiple devices for a column at the same time to divide the number of copies. For example, class = "col-md-4 col-sm-6" where 4 and 6 represent the number of copies

	<div class="container">
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
    </div>

The number of copies here does not have to be the same, as long as the total is 12.

• If the child's shares add up to 12, the child can be covered with the width of the whole container;
• If the child's total number of copies is less than 12, there will be blank if it is less than the whole container width;
• If the child's copies add up to more than 12, the extra columns will be displayed in another row.

Specify the class names of multiple devices for a column to divide the number of copies:

<div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>

3. Column nesting

The simple understanding is to divide the column into 12 equal parts and add several sub elements. It is better to add a row to the column nesting, so that the padding of the parent element 15px can be cleared, and the height is automatically as high as the parent.

	<div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- It is better to add a row to the column nesting, so that the parent element 15 can be cleared px of padding And the height is automatically as high as the parent -->
                <div class="row">
                    <div class="col-md-6">a</div>
                    <div class="col-md-6">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>

4. Column offset

Use the. Col MD offset - * class to offset the column to the right. These classes actually increase the left margin for the current element through the * selector

	<div class="container">
        <div class="row">
            <div class="col-md-3">left</div>
            <div class="col-md-3 col-md-offset-6">right</div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">Middle box</div>
        </div>
    </div>

5. Column sorting

You can easily change the order of columns by using the. column MD push - * and. column MD pull - * classes.

	<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">left</div>
            <div class="col-md-8 col-md-pull-4">right</div>
        </div>
    </div>

6. Responsive tools

In order to speed up the development of mobile device friendly pages, we can easily display or hide page content for different devices by using media query function and these tools.

Class name	Ultra small screen	Small screen	Middle screen	Large screen
.hidden-xs	hide	so	so	so
.hidden-sm	so	hide	so	so
.hidden-md	so	so	hide	so
.hidden-lg	so	so	so	hide

	<div class="container">
        <div class="row">
            <div class="col-xs-3">
                <span class="visible-lg">I'll show you</span>
            </div>
            <div class="col-xs-3 ">2</div>
            <div class="col-xs-3 hidden-md hidden-sm hidden-xs">I can do magic</div>
            <div class="col-xs-3 ">4</div>
        </div>
    </div>

For both hidden and displayed elements, use visible - *. Elements can be displayed for different devices.

7, Mobile terminal layout summary

1. Mainstream mobile solutions

• Make mobile terminal page separately (mainstream)
• Responsive page compatible with mobile terminal

2. Mobile terminal technology selection

• Streaming layout (percentage layout)
• flex flexible layout (recommended)
• rem adaptive layout (recommended)
• Responsive layout

Fan Wai: vw and vh future trends

But not for pc!! Only for mobile terminal

1. What is vw/vh

• vw/vh is a relative unit (similar to em and rem relative units)

  vw: viewport width viewport width units

  vh: viewport height viewport height units

• Relative viewport size calculations

  1vw = 1/100 viewport width

  1vh = 1/100 viewport height

Note: there is a difference between and percentage. The percentage is relative to the parent element, while vw and vh are always specific to the current viewport.

2. Use of vw/vh

The element unit can directly use the new unit vw/vh. Because it is a relative unit, the width and height change together in different viewports (screens) to complete the adaptation.

		div {
            width: 10vw;
            height: 10vh;
            background-color: pink;
        }

How to restore a design draft?

• Premise: the design draft is designed according to iPhone 6 / 7 / 8. There is a box of 50px*50px. How to use vw?
  1. IPhone 6 / 7 / 8, so the viewport width size is 375 px
  2. Then 1vw = 3.75px
  3. Element = 50px
  4. So element = 50/3.75 = 13.3333vw

matters needing attention:

• When vw is used in development, the mode needs to be changed to 2 × pattern
• Because it involves a lot of division, it is better to match with LESS
• The essence is to scale the width and height of page elements according to the viewport width, which is basically enough, vh rarely used
• Compatibility: compatibility issues can be viewed on this website: https://caniuse.com/