Home > Web Front-end > JS Tutorial > body text

How to implement responsive layout

一个新手
Release: 2017-10-01 07:43:55
Original
4726 people have browsed it

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!