html5-Mobile Development common skills and the use of flexible layouts

First, mobile development common skills viewport basic knowledge

Set up various information for layout viewport
1, width=device-width; set viewport viewport width equal to device width
2, initial-scale=1; page default zoom ratio is 1 (Web page on handheld device, no default scaling
3, minimum-scale=1 Web page minimum scaling ratio is 1
4, maximum-scale=1 Web page minimum large scale ratio of 1
5, User-scalable=no prohibit users to manually zoom the Web page (ios10+ device failure)

In the production of mobile station and responsive website, the webpage must add the following viewport setting statement

<name= "Viewport"  content= "width=device-width,initial-scale=1, Minimum-scale=1,maximum-scale=1,user-scalable=no "/>

Prohibit the device to identify mobile phone number, mailbox, cancel Click to make phone calls and other events

<name= "format-detection"  content= "Telephone=no,email=no" />

When iOS is added to the home screen, the WebApp title

<name= "Apple-mobile-web-app-title"  content= "title"  />

When iOS is added to the home screen, enable WebApp full screen mode, remove top address bar and Bottom toolbar

<name= "apple-mobile-web-app-capable"  content= "Yes"/ >

When iOS is added to the home screen, the WebApp top status bar color:
Black: White
White: Black
Balck-translucent: Black Translucent. But when set to translucent, the page fills the entire screen, and the top transparent status bar covers a strip

<name= "Apple-mobile-web-app-status-bar-style"  content= " Black "/>

WebApp icon when iOS is added to home screen, href attribute is icon path

<rel= "apple-touch-icon-precomposed"  href="/>

Set up your browser to use the latest IE or chrome to compile:
>>> This sentence Set statement is not dedicated to mobile phone, the general PC page needs to be set

<http-equiv= "x-ua-compatible"  content= "Ie=edge,chrome=1"  />

[Phone-side font style]

1, the general mobile phone does not support Microsoft Ya-Black font
2, the Chinese font is generally not set, using the system default can
3, English font is generally set to Font-family:helvetica;

Font-family:helvetica;

Set user cannot select text:

1, mobile phone can not be long-press the selection
2, PC can not use the mouse to select

-webkit-user-select:none;-moz-user-select:none;

Set the default appearance of the form, which can be used by both the phone and PC

Appearance:none;-webkit-appearance:none;-moz-appearance:none;

Setting the properties of a placeholder

Input::-webkit-input-placeholder {    color:red;} Input:-ms-input-placeholder {//ie10+    color:red;} Input:-moz-placeholder {//firefox4-18    color:red;} Input::-moz-placeholder {//firefox19+    color:red;}

Suppress pictures and hyperlinks long press the pop-up menu

-webkit-appearance:none;

Two, responsive layout "three ways to use media queries" 1, directly in the CSS use:

@media type (long selected All/screen) and (condition 1) and (condition 2) {
CSS Selector {
CSS properties: property values;
}
}

2, use the link Link Css,media property to set the media query mode:

<link rel= "stylesheet" href= "css/02 responsive layout. css" Media= "All and (max-width:800px)"/>

3, using @import Import, directly after the URL () using a space, that is, the media query rules:

@import URL ("css/02-responsive layout. css") All and (max-width:800px);

Third, the use of flexible layout [Flex flexible layout] 1, understand two basic concepts

Container: A parent element that needs to add a resilient layout
Project: Each child element in a resilient layout container, called a project

2, the use of flexible layout?

① adds a Display:flex/inline-flex to the parent container, which allows the container content to be displayed in a resilient layout, rather than following the normal flow of the document
② containers Add resilient layouts, only the container content is flexible, and the container itself is positioned in the document flow in a way that is consistent with regular document flow
③Display:flex; Containers are displayed as block-level elements after they are added to the flex layout
Display:inline-flex; Containers are displayed as row-level elements after they are added to the flex layout
④ Note that after the Flex layout is set, the float, clear, and vertical-align properties of the child elements are invalidated. However, the position attribute is still in effect.

3. The ①flex-direction property of the relevant properties of the container determines the direction of the spindle (that is, the direction of the project).　　Row (default): The spindle is horizontal, starting at the left Row-reverse: The spindle is horizontal, the starting point is at the right end of the column: The spindle is in the vertical direction, the starting point is on the top edge. Column-reverse: The spindle is in the vertical direction, starting at the bottom edge.

②flex-wrap property Definition, how to wrap a line if one of the axes does not fit

NoWrap (default): No Line break. The width of each item is extruded when the container is not wide enough
Wrap: Wrap, and the first line is at the top of the container
Wrap-reverse: NewLine, and the first line is at the bottom of the container

③flex-flow is the abbreviated form of flex-direction and Flex-wrap, and the default value is row nowrap

The ④justify-content property defines how the item is aligned on the spindle.
>>> This property is closely related to the direction of the spindle: The row-beginning on the left, the row-reverse-beginning on the right, the column-beginning on the top, the column-reverse-beginning in the bottom
Flex-start (default): Project at start of spindle
Flex-end: Project at the end of spindle
Center: Center
Space-between: Justified, the interval between items is equal. (no interval between the beginning and the last item, the edge of the parent container)
Space-around: The intervals on each side of the item are equal. Therefore, the interval between items is one times larger than the interval between items and borders. (Initial and final items, with a certain interval from the edge of the parent container)

The ⑤align-items property defines how the item is aligned on the intersection axis.
Flex-start: The start alignment of the intersection axis.
Flex-end: The end alignment of the intersection axis.
Center: The midpoint alignment of the intersection axis.
Baseline: The baseline alignment of the first line of text for the item. (The line height of the text, the font size affects the baseline of each line)
Stretch (default): If the item is not set to height or auto, it fills the height of the entire container.

The ⑥align-content attribute defines the alignment of multiple axes. If the item has only one axis, this property does not work.
>>> when a project is swapped for multiple rows, you can use align-content instead of Align-items (single-row use of align-items, multiple rows using align-content)
Flex-start: Aligns with the starting point of the intersection axis.
Flex-end: Aligns with the end of the intersection axis.
Center: Aligns with the midpoint of the intersection axis.
Space-between: aligned with the intersection axis and evenly spaced between the axes.
Space-around: The intervals between each axis are equal. Therefore, the spacing between the axes is one times larger than the interval between the axes and the border.
Stretch (default): The axis fills the entire cross axis.

4, for the properties on the project

The ①order property defines the order in which items are arranged. The smaller the number, the higher the alignment, and the default is 0.
The ②flex-grow property defines the magnification of the item, which defaults to 0, that is, if there is space left, it is not zoomed in.
The ③flex-shrink property defines the scaling of the project, which defaults to 1, which means that if there is not enough space, the project shrinks.
④flex-basis defines the spindle space occupied by the project. (If the spindle is horizontal, setting this property is equivalent to setting the width of the item.) The original width will fail)
The ⑤flex property is shorthand for Flex-grow, Flex-shrink, and flex-basis, and the default value is 0 1 auto. The latter two properties are optional.
This property has two shortcut settings: auto= (1 1 Auto)/none (0 0 Auto)
⑥align-self: Defines how individual items are arranged on the cross axis, overwriting the Align-item property on the container
Property value: Same as Align-items, the default value is auto, which represents the Align-items property value that inherits the parent container

Four, responsive layout demo

HTML code:

<!DOCTYPE HTML><HTML>    <Head>        <MetaCharSet= "UTF-8">        <title></title>        <Linkrel= "stylesheet"href= "css/-responsive layout demo.css"/>        <Metaname= "Viewport"content= "Width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    </Head>        <Body>        <HeaderID= "header">            <ul>                <Li>Header1</Li>                <Li>Header2</Li>                <Li>Header3</Li>                <Li>Header4</Li>                <Li>Header5</Li>            </ul>                        <Div>Icon</Div>        </Header>                < SectionID= "Main">            <Divclass= "Left">Left</Div>            <Divclass= "Center">Center</Div>            <Divclass= "Right">Right</Div>        </ Section>                                        <FooterID= "Foot">Footer</Footer>    </Body></HTML>

CSS Code

*{margin:0px;    padding:0px;    font-size:48px;    Text-align:center; Box-sizing:border-box;}    #header, #main, #foot {height:100px;    width:1200px;    Background-color:chocolate;    line-height:100px;    margin:0 Auto; min-width:300px;} #header ul{width:80%;}    #header ul li{Float:left;    width:20%;    List-style:none; font-size:20px;}    #header div{width:50px;    height:50px;    Background-color:yellow;    Float:right;    line-height:50px;    font-size:20px;    margin-top:25px;    margin-right:25px; Display:none;}    #main {height:500px;    line-height:500px;    border-bottom:10px solid white; border-top:10px solid White;}    #main. left{width:25%;    height:500px;    Background-color:darkcyan; Float:left;}    #main. center{width:50%;    height:500px;    Background-color:navajowhite;    Float:left;    border-left:10px solid white; border-right:10px solid White;}    #main. right{width:25%;    height:500px; backgRound-color:salmon; Float:left;}    @media screen and (max-width:1200px) {#header, #main, #foot {width:100%;    }} @media only screens and (max-width:900px) {#main. right{display:none;    } #main. left{width:35%;        } #main. center{width:65%;    Border-right:hidden;    }} @media only screens and (max-width:600px) {#header ul{display:none;    } #header div{Display:block;    } #main {height:920px;        } #main. left{float:none;        width:100%;        height:250px;    line-height:250px;        } #main. center{float:none;        width:100%;        height:400px;        line-height:400px;        Border-left:hidden;        border-top:10px solid white;    border-bottom:10px solid white;        } #main. right{display:block;        Float:none;        width:100%;        height:250px;    line-height:250px; }}

Display effect:

html5-Mobile Development common skills and the use of flexible layouts