Responsive layout and Bootstrap

Introduction to responsive layouts what are the pros and cons of responsive layout-responsive layout design Principles Implementation Method Introduction Css3-media Query Simple Case Bootstrap Introduction Bootstrap basic introduction (bootstrap.com)

An introduction to responsive layouts What is responsive layout

Make a website compatible with devices of different resolutions;
Give users a better visual experience. the pros and cons of responsive layouts

  Advantages: Solve the difference between the devices display (to make different devices to achieve the best experience)
  disadvantage: For developers, the compatibility code, workload, for the browser, loading speed
       is affected, the original site layout will have an impact, the browser user judgment may not be accurate, For example, when browsing a website on a PC, the Chorme Browser narrows the window, and the site may suddenly change to a mobile-style.

Responsive layout Design principles

    Mobile first
   in the early design of the page to consider how to display the multi-terminal
    progressive enhancement to
   fully play the maximum function of the hardware device (ie678, can not be used CSS3)

Introduction to implementation methodsCss3-media Query (easiest way) with native JS (high cost, not recommended) Third party open source framework (can support browser responsive layout design well) css3-media Query Simple case

Common Properties:
device-width,device-height--a different display depending on the width of the screen
width,height--Render window Width height
orientation-– Device Orientation
resolution--Device Resolution (DPI-determined)
eg
@media screens and (min-width:480px) {//When the screen is greater than or equal to 480px
Body{background:yellowgreen;}
} Bootstrap Introduction to Bootstrap (bootstrap.com)

is a responsive layout of the framework, it allows developers to write very little code to achieve multi-terminal page adaptation, not only for us to solve the problem of incompatible CSS3 of low-end browsers, but also for us to solve different resolutions of the device above the page layout display.
If IE8 browser, need to use respond.js to do media query compatibility, respond.js must be deployed under the Webserve domain name, cannot be deployed under the static resource domain, or there will be cross-domain issues
For cross-Domain solutions: Link: respond.js doc (Respond.js and Cross-domain CSS)

    The initialization framework uses NORMALIZE.CSS;
    grid structure (grid system) (core) https://www.cnblogs.com/JerryTao/p/5476027.html;
    Create a page layout by combining a series of rows and columns (column), automatically divided into up to 12 columns, content in columns, and only columns as direct child elements of the row.

Bootstrap comes with some beautiful CSS styles, eg: tables, buttons, forms and other
reusable layout components, eg: navigation, pagination, tags, button groups, etc.
bootstrap in the JS plugin, eg: Carousel, folding, scrolling monitoring and so on
Custom Bootstrap