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 heightOrientation 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;}
<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!