基本实现
CSS中的Media Query(媒介查询),使用方法有外联和内嵌两种
meta中属性值的解释:
- name:当前屏幕的宽高
- content中的width=device-width:宽度为当前设备宽度及initial-scale=1:原比例缩放
以外联样式为例:
*{ margin: 0px; padding: 0px; } .heading,.container,.footer{ margin: 10px auto; } .heading{ height: 100px; background-color: #00a0dc; } .left,.right,.main{ background-color: #337799; } .footer{ height: 100px; background-color: #f01400; } /*屏幕最小宽度为600px时使用该样式*/ @media screen and (min-width: 960px){ .heading,.container,.footer{ width:960px } .left,.main,.right{ float: left; height: 500px; } .left,.right{ width: 250px; } .main{ margin-left: 5px; margin-right: 5px; width: 450px; } .container{ height: 500px; } } /*屏幕宽度介于600px和960px之间时使用该样式*/ @media screen and (min-width: 600px) and (max-width: 960px) { .heading,.container,.footer{ width: 600px; } .left,.main{ float: left; height: 400px; } .right{ display: none; } .left{ width: 160px; } .main{ width: 435px; margin-left: 5px; } .container{ height: 400px; } } /*屏幕最大宽度为600px时使用该样式*/ @media screen and (max-width: 600px){ .heading,.container,.footer{ width: 400px; } .left,.right{ width: 400px; height: 100px; } .main{ margin-top: 10px; width: 400px; height: 200px; } .right{ margin-top: 10px; } .container{ height: 420px; } }
<head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" type="text/css" href="newstyle.css"> </head> <body> <div class="heading"></div> <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div> <div class="footer"></div> </body>
Bootstrap
Bootstrap是一种简洁、直观、强悍的前端开发框架,让web开发更加迅速、简单。利用Bootstrap框架进行响应式布局的实现,Bootstrap API网址为https://getbootstrap.com
优点:
快速、简单、灵活的栅格系统、小而强大、响应式布局、跨平台等。