自适应布局
2016-04-18 21:27
411 查看
关于自适应布局,主要是在不同的设备中,显示都能达到一种理想的效果,所以采用了自适应。
对应的css文件
自适应的小案例
css文件
<!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-width:640px)'/>//这句话的意思是说如果设备的宽度在640px以下的话就遵循这个样式 <style> @media screen and (min-width: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-width: 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-width: 600px) and (max-width: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-width: 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; } }
相关文章推荐
- java final 关键字醍醐灌顶
- 作业5:需求分析
- 南京理工校赛同步 I题 puzzle 2-sat+二分
- python进程写文件与多进程记录日志
- Socket通信
- Socket通信
- Socket通信
- Socket通信
- Socket通信
- Socket通信
- Socket通信
- Socket通信
- 结对编程(二)
- handler机制详细解释
- 第一阶段冲刺(第一天)
- [Robotics: Aerial Robotics] Quadrotor Dynamics 四旋翼无人机动力学
- Android学习第八篇——DrawerLayout
- 工作中最全最常用的正则表达式
- 关于近期面试的一些总结
- Android面试题(四)