Adaptive page
Adaptive means that the page content automatically adapt to the screen size, there are many ways to achieve adaptation:
Scene adaptive 1. Simple: floating, centered on the page, the write element width is not fixed percentage automatically match the size provided. So that when the width of the page is changed, the above characteristics can be achieved using a simple adaptive effect.
2. If there is a demand of the actual development of complex scenes, usually by writing multiple sets of CSS code, and then use the media query technology , allowing pages to load different code modules, depending on screen size in order to achieve the purpose of adapting different screen. In this way need to write multiple sets of code, although heavy workload, but for different screen sizes of equipment has a separate set of CSS code maintenance more convenient.
3. responsive layout, responsive page layout refers to the automatic adjustment of adaptive display (also used depending on the screen size media query technology ). Usually a grid layout in response to system layout, flex layout. The core bootstrap framework is a grid system. (Described in detail later grid system implementation).
CSS3 media queries media queries
Css media queries may use different devices for different scenarios, and general system grid code logic sets the page match the page size is determined to be a media query. Principles of media queries technology: by matching the characteristics of different screen device, so that the CSS code for different features to take effect.
Common features matching media featureswidth/height: browser width and height max-width：represent effective when less than the maximum width min-width：represents a width greater than the minimum effective when device-width/device-height:the device resolution of a wide screen high resolution: device resolution orientation：when Portrait (vertical), equal to a width greater than the height, Landscape (horizontal), a height less than the width
Feature matching operator
when the media type match and when the expression is true, the corresponding style will work:
1.and
@media (min-width: 700px) and (orientation: landscape) {
...
}700px represents the minimum width limit, when the width of the browser to take effect and greater than or equal 700px transverse CSS code
2. Comma Separated
@media (max-width: 500px), handheld and (orientation: landscape) {
...
}Limit represents the maximum width of 500px, when the browser 500px width equal to or less than a handheld device and is laterally commencement
Media Inquiries introduced
link the introduction of way
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">@media import
@media screen and (max-width: 990px){
.container{
background: orange;
}
}Flex layout
The traditional layout: Floating + position positioning + display simple layout of the property needs can be easily achieved, but it is not easy to achieve this common absolute center of the scene, while the floating layout also have some side effects effects. Flex elastic layout, to provide maximum flexibility for box model can be simple, complete and responsive to achieve a variety of page layouts. At present, it has been supported by all browsers.
The basic concept of flex:
1. Any container elements can be designated as a flex container
block-level elements: the display: flex
inline layout flex elements can be used: the display: inline-flex;
2. layout using Flex Flex container element called ( flex container), referred to as "container." It's all child elements automatically become a member of a container, called a Flex project (flex item), referred to as "project."
Container has two axes, a horizontal spindle (main axis) and vertical axis intersect (cross axis). The start position of the spindle (intersection with border) is called the main start, end position called the main end; cross-axis start position is called cross start, the end position is called the cross end. The default project along the spindle arrangement. Single project called the space occupied by the spindle main size, the space occupied by the cross-axis is called the cross size.
Six attributes 3.flex container vesselflex-direction direction row (rows Default) / row-reverse / column (longitudinal) / Reverse column-
Flex-direction: when the spindle row in the X direction / Y-direction when the spindle column
flex-wrap Wrap nowrap (the default does not wrap) / wrap /
flex-flow The above two properties short flex-flow: row wrap row above two properties can be written as
justify-contentSpindle alignment:
* Space-BETWEEN (extra space of the discharge intermediate)
Space-around (the extra space of the discharge sides)
Flex-Start (Item element near the spindle origin)
Flex-End (Item element near the spindle end)
Center (Item element centered) *
align-itemsCross-axis alignment
* stretch extended (default value, provided that the item element width / height uncertain), all elements of width / height are full to the entire Container
Flex-Start (item elements near the cross-axis origin)
Flex-End (item elements near cross-axis end)
Center (Item centering element)
Baseline (item baseline alignment of the elements of the first line of text) *
align-content Multi-axis intersecting the axial direction of alignment (multiple row / multiple column), why not the spindle, has changed since the line is a multi-line ah.
flex-start item close to the starting point of the cross shaft
flex-end item element close to the end of the cross shaft
center item elements close to the cross-axis center
space-between item elements of the cross shaft ends aligned
space-around item equal element spacing each side of an axis, the axis the spacing between the axis of the frame than the interval twice as large
Stretch (default value) Item element occupies the entire cross-axis
flex item attributes sixorder item sequential elements
flex-grow Extra space allocation ratio item elements, i.e., does not amplify the default is 0
flex-shrink When space is insufficient item contraction proportional element, the default is 1 that is twice as narrow
flex-basis Spindle size specified item elements occupy main size (px /%) before allocating extra space, the size of the project itself that is the default auto
flex The above three attributes shorthand, note the order
align-self Specify a single item of the alignment element itself, may cover the align-item attributes, the default auto align-item attribute inheritance
* Start-Flex
Flex-End
Center
Baseline
Stretch *
Grid System
Grid system is an adaptive page layout, the page layout for creating a series combination of rows (Row) and the column (column), the contents of display can be actually placed in the created raster these . When the width of the page is changed, the size of each grid will automatically adjust to page size.
The principle of the grid system:
1. The line layout for each page divided into 12 aliquots, each aliquot i.e. a grid. A grid accounted for 1 / 12,2 a grid accounted for 2/12, and so on. All the page wrap container when wrapping the parent container by the grid, all grid disposed within the row or set of floating elements remain in one row, row arrangement high. All grid arranged to border-box.
2. grid defining different screen sizes different css class name, for example:
use the default screen size: grid-df-1, grid -df-2
a small screen size using: grid-sm-1, grid -sm-2
Screen use mesoscale: grid-md-1, grid -md-2
large screen size used: grid-lg-1, grid -lg2
3. Media inquiries
@media screen and (min-width:768px){
......
}Different restriction width of the browser (i.e., different screen sizes) when a fixed width container. At the same time provided with different screen sizes, css grid corresponding to the ratio of the widths.
4. Set the number of cells at different screen sizes needed for each account grid. Then media queries will be in the size of different screen sizes, so that each grid due to scale. For example <div class = "grid-df -1 grid-sm-12 grid-md-3 grid-lg-6"> </ div> i.e. the div representing a frame in the default screen size, representing 12 at sm size cells, representing cells at md 3, 6-cell size occupy at lg
sample code:
@media screen and (min-width:768px){
#container{
width:768px;
}
.grid-sm-1{
width:8.3333333%;
}
.grid-sm-2{
width:16.666666%;
}
.grid-sm-3{
width:25%;
}
.grid-sm-4{
width:33.333333%;
}
.grid-sm-5{
width:41.666666%;
}
.grid-sm-6{
width:50%;
}
.grid-sm-7{
Effect is achieved as follows, when the width of a normal size page if the page width is smaller than the maximum width of the media queries set
