I Viewport
A viewport is the area of the screen where the browser displays the contents of the page. Viewports can be divided into layout viewports, visual viewports, and ideal viewports
1. layout viewport
The browser of general 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 resolution of this viewport to 980px, so most web pages on PC can be presented on mobile phones, but
The element looks very small. Generally, you can manually zoom the web page by default.
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
Ideal viewport, the most ideal size for the device
You need to manually add a meta viewport label to notify the browser of the action
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 how wide the device is,
We have to decide how wide the layout is
3.meta viewport
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> user-scalable Allow users to zoom (yes or no )(1 Or 2) initial-scale Initial zoom ratio maximum-scale Maximum zoom ratio minimum-scale Minimum zoom ratio
2, Double graph
1. Physical pixel & Physical pixel ratio
Physical pixels refer to the smallest particles displayed on the screen, which are physically real. The manufacturer has set it before leaving the factory, for example
Apple 6 / 7 / 8
When we develop, 1px is not necessarily equal to 1 Physical pixel
The page 1px on the PC side is equal to 1 Physical pixel, but the mobile side is different
The number of physical pixels that can be displayed in a px is called physical pixel ratio or screen pixel ratio
2. Background zoom
background-size:Background width background height; The units inside can follow% background-size:cover;To completely cover the background picture, some pictures may not be displayed completely background-size:contain;Expand the picture to its maximum size so that its width and height fully match the content area. When the width or height meets, the expansion stops, and there may be blank areas css initialization normalize.css
With this sentence, the box becomes css3 Box model border and padding No more big boxes box-sizing:border-box; Traditional box model box-sizing:content-box;
/*css3 Box model*/
box-sizing:border-box;
-webkit-box-sizing:border-box;
/*Click to highlight that we need to clear the setting to transparent to complete transparency*/
-webkit-tap-highlight-color:transparent;
/*The default appearance of the browser on the mobile terminal is to add this attribute to the IOS to customize the style of buttons and input boxes*/
-webkit-appearance:none;
/*Disable the pop-up menu of long press page*/
img,a{-webkit-touch-callout:none;}
3, Mobile terminal technology type
1. Make mobile terminal page separately (mainstream)
(1) Streaming layout (percentage layout)
Streaming layout is percentage layout, also known as flying fixed pixel layout
By setting the width of the box as a percentage, it is expanded and retracted according to the width of the screen, which is not limited by fixed pixels, and the content is filled on both sides
Streaming layout is a common method used in mobile web development
max-width:; Maximum width
min-width:; Minimum width
(2) flex flexible layout (highly recommended)
1. When the parent element is set to flex layout, the float and vertical align attributes of the child element will become invalid
2. Telescopic layout = elastic layout = telescopic box layout = elastic box layout = flex layout
Parent flex container Child element flex project Common parent properties flex-direction:Set spindle direction Spindle: x Axis direction, horizontal right Side shaft: y Axis direction, horizontal down Elements are arranged with the main axis row The default is left to right row-reverse Right to left column From top to bottom column-reverse From bottom to top justify-content:Sets the arrangement of child elements on the spindle flex-start The default value starts from the head if the spindle is x Axis, from left to right flex-end Arrange from the tail center Align in the center of the spindle (if the spindle is x Axis (horizontal center) space-around Divide the remaining space equally space-between Trim both sides first and then divide the remaining space equally (important) flex-wrap:Sets whether the element wraps (no wrapping by default) nowrap Default, no line breaks wrap Line feed align-content:Set the arrangement of child elements on the side axis (multiple rows) (not effective in the case of single row) flex-start From top to bottom flex-end From bottom to top center Squeeze together and center (vertical center) stretch stretching(Default value) align-items:Set the arrangement of child elements on the side axis (single line) flex-start Top to bottom (default) flex-end From bottom to top center Squeeze together and center (vertical center) stretch stretching flex-flow:Composite attribute, which is equivalent to setting flex-direction and flex-wrap flex Common properties of layout children flex Share of subproject align-self Controls how children are arranged on the side axis align-self Property allows a single item to be aligned differently from other items and can be overridden align-items Properties. The default value is auto，Represents an element that inherits from the parent element align-items Property. If there is no parent element, it is equivalent to stretch. order Property defines the order in which children are arranged (before and after) The smaller the number, the higher the number. The default values are 0 and z-index dissimilarity flex attribute flex:number; flex Property defines the remaining space allocated by the subproject flex To represent the number of copies
1. Background linear gradient (top to bottom by default)
background:linear-gradient(Starting direction, color 1, color 2,...) background:-webkit-linear-gradient(left，red，blue，...)
(3) less+rem + media query layout
Font size of em relative to parent element
rem (root em) fits the layout (rem is a unit) (equivalent to the font size of html elements)
Media Query is a new syntax in CSS3
1. Using @ media query, you can define different styles for different media types
2.@media can set different styles for different screen sizes
3. When you reset the browser size, the page will also be re rendered according to the width and height of the browser
4. At present, it is aimed at many apple phones. Android mobile phones, tablets and other devices are used for multimedia query
Media type keyword media properties
@media mediatype and|not|only{media feature}{
CSS-Code;
}
(1)mediatype
all For all equipment print For printer and print preview screen Used for computer screen, tablet, smartphone, etc and Multiple media features can be connected together, which means "and" not Excluding a media type is equivalent to "not" and can be omitted only Specify a specific media type, which can be omitted width Defines the width of the visible area of the page in the output device min-width Defines the width of the smallest visible area of the page in the output device max-width Defines the width of the maximum visible area of the page in the output device
Hybrid layout
2. Responsive pages are compatible with mobile terminals (second)
Media query
Media Query is a new syntax in CSS3
1. Using @ media query, you can define different styles for different media types
2.@media can set different styles for different screen sizes
3. When you reset the browser size, the page will also be re rendered according to the width and height of the browser
4. At present, it is aimed at many apple phones. Android mobile phones, tablets and other devices are used for multimedia query
Media type keyword media properties
@media mediatype and|not|only{media feature}{
CSS-Code;
}
(1)mediatype
All for all devices
Print is used for printer and print preview
Screen is used for computer screen, tablet, smartphone, etc
And can connect multiple media features together, which means "and"
Not excludes a media type, which means "not" and can be omitted
only specifies a specific media type, which can be omitted
Width defines the width of the visible area of the page in the output device
Min width defines the width of the smallest visible area of the page in the output device
Max width defines the width of the maximum visible area of the page in the output device
(2)less
1.less variable
@Variable name: value
Naming conventions:
·There must be a @ prefix
·Cannot contain special characters
·Cannot start with a number
·Case sensitive
2.less compilation
Install easy less plug-in
3.less nesting (written in the file with less suffix)
.hearder{
width: 200px;
height: 200px;
background-color: pink;
a{
color:red;
}
}
Writing of pseudo class selector
·If the inner selector is not preceded by the & symbol, it is resolved as a descendant of the parent selector
·If there is an & symbol, it is resolved to the parent element itself or the pseudo class of the parent element
4.less operation
less provides addition, subtraction, multiplication and division (division should be enclosed in parentheses)
(1) The left and right sides of the operator must be separated by a space
(2) Two numbers participate in the operation. If only one number has a unit, the final result will be subject to this unit
(3) Two numbers participate in the operation. If both have units and different units, the final result shall be subject to the first unit
5. Import less file (you can import one style file into another)
@import "common"
6.rem adaptation scheme 1
Element size value method
(1) The final formula: rem value of page element = page element value (px) / (screen width / number of copies divided)
(2) Screen width / number of copies divided is the size of HTML font size
(3) Or: rem value of page element = font size of page element value (px) / HTML font size
7.rem adaptation scheme 2
px conversion rem plug-in cssrem
4, Responsive layout
1. Responsive development (a parent is required as the layout container)
Ultra small screen (mobile phone) < 768px
Small screen (flat panel) > = 768px < 992px
Medium screen (desktop display) > = 992px < 1200px
Wide screen equipment (large screen display) > = 1200px
The principle is to change the size of the layout container through media query on different screens,
Then change the arrangement of sub elements inside, so as to see different page and style changes under different screens
Division of usual responsive dimensions
Ultra small screen (mobile phone) set the width to 100%
The setting width of small screen (flat panel) is 750px
The medium screen (desktop display) width is set to 970px
The width of wide screen equipment (large screen display) is set to 1170px
2. Bootstart front-end development framework
(1) Create folder structure
(2) Create html skeleton structure
(3) Import related style files
(4) Writing content
3. Bootstrap grid system
Rows must be placed in the container layout container
To achieve the average division of columns, you need to add a class prefix to the columns
. Col XS - XS extra small: ultra small;
. Col SM - small: small;
. Col MD - MD medium: medium;
. Col LG - LG large;
There will be blank when the column is less than 12 copies
When the column is larger than 12 columns, the redundant column will be displayed in another row
Divide the page into several equal width columns
Each column has a default padding 15px
Add a row box when nesting
Column offset
-offset-
column permutation
-Push push
-Pull pull
Responsive tools
Class name ultra small screen small screen medium screen large screen
. Hidden XS hidden visible
. Hidden SM visible hidden visible
. Hidden MD visible hidden visible
. Hidden LG visible hidden
Visible is the display