响应式布局

来源：互联网发布：桌面软件编辑：程序博客网时间：2024/06/01 08:38

媒体查询：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .a{ border: 1px solid #000000; width: 100px; height: 100px; background-color: #000000; } @media only screen and (min-width: 300px) and (max-width: 640px) { .a{ background-color: red; } } @media only screen and (min-width: 700px) { .a{ background-color: green; } } @media only screen and (max-width:200px ) { .a{ background-color: blue; } } </style> </head> <body> <div class="a"></div> </body> </html> 栅格系统：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link href="css/bootstrap.min.css?v=3.3.6"rel="stylesheet"> <style> /*通配符选择器*/ [class*="col-"]{ border: 1px solid gray; } @media only screen and (max-width: 768px) { #demo{ display: none; } } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div id="demo" class="col-lg-2 col-md-1 col-sm-1">左侧导航</div> <div class="col-lg-8 col-md-11 col-sm-11 col-lg-offset-2">右侧内容</div> </div> </div> </body> </html>

阅读全文

0 0