Mobile Web Development ——— the third day

First, responsive development
1, responsive layout, is a website can be compatible with multiple terminals.
2, the principle of responsive development
Media query in CSS3 (media queries, and must be followed by Space @media screen and (min-width:768px) and (max-width:992px) {}; Specifies the page layout for a width range by querying the width of screen.
Ultra small screen (mobile device) 768px or less
Small screen Device 768px-992px
Medium Screen 992px-1200px
Large screen equipment 1200px or more
3. The difference between responsive development and mobile web development
Development Mode Mobile Web development +PC Development Responsive Development
Application scenarios generally in the existing PC segment of the site, the development of mobile stations, only need to develop a mobile terminal for the new station of some sites, now requires the adaptation of mobile, so a set of pages compatible with a variety of terminals, flexible
Development of targeted, high efficiency compatible with a variety of terminals, low efficiency
Fit only with mobile devices, the pad experience is relatively poor can be adapted to a variety of terminals
Efficiency code is simple, loading fast code is relatively complex, loading slow

BootStrap
Bootstrap framework----Currently the most Popular front-end UI framework (with prefabricated interface components)
Features: Simple and generous components, simplified code specification, strong interface customization
Advantages:
have their own biosphere, constantly updating iterations
Provides a set of simple, intuitive and powerful components
Standard specification for HTML+CSS coding with quasi-normalization
Make development easier and improve the efficiency of development.
3. Layout container
. container fixed-width containers that support responsive layouts
Default margin:55px; padding:15px;
The. Container-fluid class is used for containers of 100% widths that occupy all viewports (viewport).
4. Delete Grid system
Row: Row fills the inner margin of the parent container with its own stretch
Delete Lattice parameters:
Ultra small Screen Phone (<768px) Small screen flat panel (≥768PX) Medium screen (≥992px) large screen (≥1200px)
The grid system behavior is always stacked horizontally initially, and will be arranged horizontally when greater than these thresholds C
. Container Max width None (auto) 750px 970px 1170px
Class prefix. col-xs- . col-sm- . col-md-. col-lg-
Number of columns (column) 12
can be nested is
Offset (offsets). col-xs-offset-
Visible, hidden. visible-xs- . Hidden-xs

Mobile Web Development ——— the third day