Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to write responsive layout code in html". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to write responsive layout code in html.

1. Use directly in the CSS file:

@ media type and (condition 1) and (condition 2) {

Css style

}

@ media screen and (max-width:1024px) {

Body {

Background-color: red

}

}

two。 Import using @ import

@ import url ("css/moxie.css") all and (max-width:980px)

3. It is also the most commonly used method-directly using the link connection, and the media property is used to set the query method

Here is a simple responsive layout HTMl code:

Responsive type

Here is the CSS style:

* {

Margin:0

Padding:0

Text-align:center

Color:yellow

}

.header {

Width:100%

Height:100px

Background:#ccc

Line-height:100px

}

.main {

Background:green

Width:100%

}

.clearfix: after {

Display:block

Height:0

Content: ""

Visibility:hidden

Clear:both

}

.left, .center, .right {

Float:left

}

.left {

Width:20%

Background:#112993

Height:300px

Font-size:50px

Line-height:300px

}

.center {

Width:60%

Background:#ff0

Height:400px

Color:#fff

Font-size:50px

Line-height:400px

}

.right {

Width:20%

Background:#f0f

Height:300px

Font-size:50px

Line-height:300px

}

.footer {

Width:100%

Height:50px

Background:#000

Line-height:50px

}

Style code

.right {

Float:none

Width:100%

Background:#f0f

Clear:both

}

.left {

Width:30%

}

.center {

Width:70%

}

.main {

Height:800px

}

Style code

.left, .center, .right {

Float:none

Width:100%

}

When the window is larger than 1024px, the command is compressed and no other changes occur:

When the window is smaller than 1024px and larger than 720px, the right bar unfloats and displays below:

When the window is less than 720px, the left, middle and right columns are all unfloated, with a width of 100%:

Thank you for your reading, the above is the content of "how to write responsive layout code in html". After the study of this article, I believe you have a deeper understanding of how to write responsive layout code in html, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.