How to implement responsive layout

1. Responsive layout: In short, a website can be compatible with multiple terminals - rather than making a specific version for each terminal. This concept was born to solve mobile Internet browsing.

2, three ways to implement responsive layout

1. CSS3-Media Query (The simplest way, but Unable to meet many needs)

2. Use native Javascript (high cost, not recommended)

3. Third-party open source framework (such as bootstrap, which can well support the browser’s responsive layout)

##3, CSS3-Media Query common attributes

device-width,device-height Screen width and height

## width,height Rendering window width and height

Orientation Device direction

## Resolution Device resolution

4, CSS3-Media Query basic syntax

Outline CSS syntax and inline style syntax

Example: Outline style sheet link.css (the background is red when the screen width is less than or equal to 480px)

#.css grammar only one sentence: body {background: red;}

###### This ######5, Bootstrap################## To use bootstrap, you must introduce css and js files, a total of three, and the order cannot be reversed (the version can be changed), As shown below###############

            <script src="js/jquery.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/bootstrap.min.js"></script>

The above is the detailed content of How to implement responsive layout. For more information, please follow other related articles on the PHP Chinese website!