Implementing responsive layouts with CSS
Responsive layout It's hard to feel tall, but in fact you can use CSS to achieve responsive layout.
To use is the CSS in the not answer query, the following describes how to use:
Three ways to use @media
1. Use directly in the CSS file:
@media type and (condition 1) and (condition two) { CSS style} @media screen and (max-width:1024px) { body{ background-color:red; }}2. Importing with @import
@import url ("Css/moxie.css") All and (max-width:980px);
3. Also the most common method-use link connection directly, media property is used to set the Query method
<link rel= "stylesheet" type= "Text/css" href= "Css/moxie.css" media= "All and (max-width=980px)"/>
Here is a simple, responsive layout of the HTML code:
<!doctype html>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;}<link rel= "stylesheet" type= "Text/css" href= "index01.css" media= "screen and (max-width:1024px) and (min-width:720px ) "/> Style code
. right{ Float:none; width:100%; Background: #f0f; Clear:both;}. left{ width:30%;}. center{ width:70%;}. main{ height:800px;}<link rel= "stylesheet" type= "Text/css" href= "index02.css" media= "screen and (max-width:720px)"/> 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 less than 1024px, greater than 720px, the right side of the column to cancel the float, shown below:
When the window is less than 720px, the left and right three columns, all the floating, width 100%:
Well, the layout is so simple, the details of the grasp still rely on constant practice.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
