关于自适应布局，主要是在不同的设备中，显示都能达到一种理想的效果，所以采用了自适应。
<!DOCTYPE html> <html> <head> <title>layout.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <link href="layout.css" type="text/css" rel="stylesheet" media='only screen and (max-640px)'/>//这句话的意思是说如果设备的宽度在640px以下的话就遵循这个样式 <style> @media screen and (min-640px){ body{ background-color:blue; } } </style> </head> <body> This is my HTML page. <br> </body> </html>
对应的css文件
*{ margin:0; padding:0px; background-color:red; }
自适应的小案例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width = device-width,initial-scale=1">//这句话是设置自适应布局的标示语 <link href="1.css" type="text/css" rel="stylesheet"/> </head> <body> <div class="header"></div> <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div> <div class="footer"></div> </body> </html>
css文件
*{ margin:0; padding:0; } @media screen and (min- 940px){ .header, .container, .footer{ margin:10px auto; width:940px; height:450px; } .header{ background-color:red; } .container{ } .footer{ background-color:yellow; } .left,.main,.right{ float:left; width:300px; height:450px; background-color:blue; } .main{ margin-left:20px; margin-right:20px; } } @media screen and (min- 600px) and (max-940px){ .header, .container, .footer{ margin:10px auto; width:600px; height:450px; } .header{ background-color:red; } .container{ } .footer{ background-color:yellow; } .left,.main{ float:left; width:290px; height:450px; background-color:blue; } .right{ display:none; } .main{ margin-left:20px; } } @media screen and (max- 600px) { .header, .footer{ height:450px; } .container{ margin:10px auto; width:400px; height:1400px; } .header{ background-color:red; } .container{ } .footer{ background-color:yellow; } .left,.main,.right{ margin:0 auto; width:300px; height:450px; background-color:blue; } .main{ margin-bottom:10px; margin-top:10px; } }