Home > Developer > Web Develop
HTML Adaptive layout, @media screen, media queries
Adaptive code Example:
<!doctype html>
<meta charset= "Utf-8" >
<title> responsive layouts </title>
<style type= "Text/css" >
*{padding:0px; margin:0px; font-family: "Microsoft Jas Black";}
#header {height:100px; border:solid 1px red; margin:0px auto;}
#main {margin:10px auto; height:400px;}
#footer {margin:0px auto; height:100px; border:solid 1px red;}
/ * When the screen width is greater than 900 * /
@media screen and (min-width:900px) {
#header, #footer {width:800px;}
#main {width:800px; height:400px;}
#main-left{width:200px; height:400px; border:solid 1px red; float:left;}
#main-center{width:394px; height:400px; border:solid 1px red; float:left;}
#main-right{width:200px; height:400px; border:solid 1px red;float:left;}
}
/ * screen width greater than 600, less than 900 times * /
@media screen and (min-width:600px) and (max-width:900px) {
#header, #footer {width:600px;}
#main {width:600px; height:400px;}
#main-left{width:200px; height:400px; border:solid 1px red; float:left;}
#main-center{width:396px; height:400px; border:solid 1px red; float:left;}
#main-right{display:none;}
}
/ * When the screen width is less than 600 * /
@media screen and (max-width:600px) {
#header, #footer {width:300px;}
#main {width:300px; height:400px;}
#main-left{display:none;}
#main-center{width:300px; height:400px; border:solid 1px red;}
#main-right{display:none;}
}
</style>
< Body>
<div id= Header > Header </div>
<div id= "main" >
<div id= "Main-left" > Content-left </div>
<div id= "Main-center" > Content-Middle </div>
<div id= "Main-right" > Content-Right </div>
</div >
<div id= "Footer" > Bottom </div>
</body>
/ * Link notation */ < link rel="stylesheet" type="text/css" href="styleB.css"media="screen and (min-width: 600px) and (max-width: 800px)">
1. Add viewport tags to the HTML header.
At the beginning of the Web site HTML file, add the viewport meta tag to tell the browser that the viewport width is equal to the device screen width without initial scaling. The code is as follows:
<meta name= "viewport" content= "width=device-width, initial-scale=1"/>
This code supports chrome, Firefox, IE9 or more browsers, but not IE8 and browsers below IE8.
2. Add rules for different screen resolutions at the end of the CSS file.
For example, use the following code, you can make the screen width of less than 480 pixels of devices (such as the iphone, etc.), the Web side bar hides the middle content bar width automatically adjust. The following code is for Z-blog,wordpress-related label names just modify it.
@media screen and (max-device-width:480px) {
#divMain {
Float:none;
Width:auto;
}
#divSidebar {
Display:none;
}
}
3, the layout width uses the relative width.
The overall frame of the Web page can use absolute width, but the lower content frame, sidebar, etc. are best used relative width, so it is convenient to modify for different resolutions. Of course, you can not use the relative width, it is necessary to @media screen and (max-device-width:480px) to increase the width of the individual div for small screens, actually more trouble.
4, the page use relative font (not necessary)
Do not use the absolute font (PX) on the HTML page, but to use relative font (EM), for most browsers, usually with the EM = PX/16 conversion, such as 16px is equal to 1em.
5. Image adaptation (not necessary)
IMG tag, only need to set max-width:100%; or width:100%; The statement is: img {max-width:98%;}
CSS loaded background-image How to adapt size, in fact, CSS3 can be implemented, add the following statement: background-size:100% 100%;
HTML Adaptive layout, @media screen, media queries
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
