Home > Article > Web Front-end > [Exercise] Responsive layout_html/css_WEB-ITnose
[Exercise] Responsive layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:33:491402browse
This article refers to the exercises done with reference to http://www.netmagazine.com/tutorials/build-basic-responsive-site-css.
The author of the article explains that responsive design should not display different content for different terminals. When users can find content on the PC, they cannot find it on the mobile terminal. This is very confusing. one thing. So what responsive design needs to do is to scale appropriately and display appropriate layouts for different devices, rather than changing the content. Therefore, responsive layout is implemented using fluid layout (using percentages to set the width of each element) and CSS3 Media Query.
Let’s do a simple responsive layout exercise:
For the effect, please refer to http://www.netmagazine.com/files/tutorials/demos/2013/01/build-a -basic-responsive-site-with-css/demo/demo.html
1. First determine the document structure, two-column layout.
<!doctype html><html><head> <meta charset="UTF-8"> <title>Responsive</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" type="text/css" href="css/responsive.css"></head><body> <div id="wrapper"> <header> <nav id="skipTo"> <ul> <li> <a href="#main" title="skip to main content">skip to main content</a> </li> </ul> </nav> <h1>Demo</h1> <nav> <ul> <li><a href="#" title="home">Home</a></li> <li><a href="#" title="about">About</a></li> <li><a href="#" title="work">Work</a></li> <li><a href="#" title="contact">Contact</a></li> </ul> </nav> <div id="banner"> <img src="images/kaws.jpg" alt="banner"> </div> </header> <section id="main"> <h1>Main section</h1> <p>Lorem （省略一些内容）</p> </section> <aside> <h1>Sub-section</h1> <p>Lorem （省略一些内容）</p> </aside> </div></body></html>
The original author inserted respond.min.js to ensure that ie6-8 can run. Because I did not do compatibility testing, I did not quote this js , interested students can try it.
Add
2. Add basic styles. The navigation of #skipTo is set up for mobile devices so that users can skip the navigation and see the main content directly, so it is hidden in the basic style. It is best to set a max-width to avoid excessive enlargement on large screens, and set the width of the image to 100%, which can adapt well to the flow layout.
#wrapper{ width: 96%; max-width: 920px; margin: 0 auto; padding: 2%;}#main{ width: 60%; margin-right: 5%; float: left;}aside{ width: 35%; float: right;}header h1{ height: 70px; width: 160px; float: left; display: block; background: url(../images/demo.gif) 0 0 no-repeat; text-indent: -9999px;}header nav{ float: right; margin-top: 40px;}header nav li{ display: inline; margin-left: 15px;}#skipTo{ display: none;}#skipTO li{ background: #b1fffc;}#banner{ float: left; margin-bottom: 15px; width: 100%;}#banner img{ width: 100%;}
3. Add css adapted to mobile devices. There are two ways, one is built in css, add the following code in css
Add
to the head
@media screen and (max-width: 480px) { #skipTo { display: block; } header nav, #main, aside { float: left; clear: left; margin: 0 0 10px; width: 100%; } header nav li { margin: 0; background: #efefef; display: block; margin-bottom: 3px; } header nav a { display: block; padding: 10px; text-align: center; } }
In addition, you can also provide reduced images for mobile devices, which can save mobile device traffic and reduce loading time.
<link rel="stylesheet" type="text/css" media="screen and (max-width:480px)" href="css/mobile.css">Okay, this is the end of the entire exercise, let’s start practicing.