Mobile end note Summary

The resolution is the total number of pixels on the screen, horizontally and vertically.
If we design by the unit PX, can be said to be the physical resolution size.
If we design with a unit PT, it can be said that the logical resolution size.

===================================================

By default: Phone According to the resolution of the desktop browser, if you want to display on the phone need to add <meta> tags
<meta name= "viewport" content= "Width=device-width,initial-scale=1.0,user-scalable=no"/>

Viewport
Width=device-width width According to the equipment most suitable walk
initial-scale=1.0 Initial non-scaling
User-scalable=no Prohibit user scaling operations
Minimum-scale
Maximum-scale

===================================================

Prohibit the device will be suspected mobile phone number/mailbox, to identify. Cancel Click to make a phone call etc events
<meta name= "format-detection" content= "Telephone=no,email=no"/>

Set up the browser, when the latest IE and chrome to compile (not mobile-specific, PC Web page generally need to set)
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>

A few other meta tags to learn about
1 set the browser expiration time, 1 indicates the time expires, and each refresh to request the latest data
2 whether to set the browser cache, no
3 whether the cache file is read from the native, no

<meta http-equiv= "Expires" content= "-1" >
<meta http-equiv= "Cache-control" content= "No-cache" >
<meta http-equiv= "Pragma" content= "No-cache" >

==========================================================

Mobile-Side layouts:
1.viewport
Adjust the mobile-side resolution
<meta name= "viewport" content= "Width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

<script>
window.onload = Window.onresize = function () {
Document.documentElement.style.fontSize = document.documentelement.clientwidth/16+ ' px ';
};
</script>

2. Elastic Box Model Box-sizing
Content-box
Border-box Squeeze (weird box model)

3. Flexible Layout Flex
Parent: Display:flex;
Sub-level: flex:1
Sub-level: Flex:2
Sub-level: flex:1

4. Responsive layouts, media queries
@media (condition) {
CSS Code
}

Priority level

5.rem

------------------------------------------------------------------

Display:flex; The parent sets the Flex attribute, and the child is in a row and automatically allocates space, similar to floating. 】

The parent box is set to Display:flex, and the inline element is set to the width height directly

Justify-content: Sets the horizontal arrangement of the sub-box
Center; "Center"
Flex-start "left"
Flex-end "Right"
Space-between "Justify"
Space-around "Justified on both sides of the gap"

Align-items: Sets the vertical arrangement of the sub-box
Center; "Center vertically"
Flex-start "Top"
Flex-end "The Bottom"

Flex-direction:row;

Flex-wrap:wrap;

==========================================================

Analog Bootstrap:
1. Divided into 12 cells
2. There are 4 kinds of resolutions
LG 1200
MD 992
SM 768
XS smaller

==========================================================

Time-saving browser synchronization test tool:

Browsersync allows the browser to instantly and quickly respond to your file changes (HTML, JS, CSS, sass, less, etc.) and automatically refresh the page. More importantly, Browsersync can be in the PC, tablet, mobile phone and other equipment input debugging.

Note: You need to open the Wamp virtual server when you use it, and then install and start it on the cmd command line Browser-sync

Browser-sync
1. Installation
*global--Global Installation
NPM install-g Browser-sync

2. Switch directories
CD D:/baiduyundownload/ate

3. Running Browser-sync
Browser-sync start--server--files "*.html"

Please note that the start--server in this command, which is actually browsersync to start a small server. If you simply want to listen to the entire project, you can write it like this: "Browser-sync start--server--files" * * "

===============================================

Bootstrap: Default to. Container Plus pseudo class

. container:after,.container:before{
Content: ";
Display:none;
}

--------------------------------------------------
Container default has padding value

Visible-lg-inline-block

Mobile end note Summary