大家好，又見面了，我是你們的朋友全棧君。
兩種方法
（1）原生自适應 @media screen
表示當螢幕大于320px，并小于1156px是執行下面的css
@media screen and (min-width: 320px) and (max-width: 1156px){
.site-bg-dl {
position: fixed;
height: 100%;
width: 100%;
z-index: 0;
background-image: url(bjxzfwzx/images/bj1.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size:100% 100%;
-moz-background-size:100% 100%;
}
} 複制
（2）使用bootstrap 的 hidden-xs
表示 當螢幕小的時候 隐藏site-bg-dl
<div class="site-bg-dl-xs "></div>
<div class="site-bg-dl hidden-xs"></div> 複制
其他
複制
響應式布局：響應式工具不能用于table元素，而且 本身就不支援
響應式布局需要在<head>處添加如下語句：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 複制
在css中添加如下内容 可以分别定制不同螢幕的顯示樣式：
/* 大螢幕 ：大于等于1200px*/
@media (min-width: 1200px) { ... }
/*預設*/
@media (min-width: 980px){...}
/* 平闆電腦和小屏電腦之間的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* 橫向放置的手機和豎向放置的平闆之間的分辨率 */
@media (max-width: 767px) { ... }
/* 橫向放置的手機及分辨率更小的裝置 */
@media (max-width: 480px) { ... } 複制
響應式布局輔助class：
以下這些可以通過媒體查詢結合大型、小型和中型裝置，實作内容對裝置的顯示和隐藏
| class | 裝置 |
|---|---|
| .visible-xs | 額外的小裝置（小于 768px）可見 |
| .visible-sm | 小型裝置（768 px 起）可見 |
| .visible-md | 中型裝置（768 px 到 991 px）可見 |
| .visible-lg | 大型裝置（992 px 及以上）可見 |
| .hidden-xs | 額外的小裝置（小于 768px）隐藏 |
| .hidden-sm | 小型裝置（768 px 起）隐藏 |
| .hidden-md | 中型裝置（768 px 到 991 px）隐藏 |
| .hidden-lg | 大型裝置（992 px 及以上）隐藏 |
列印類
使用這些切換列印内容
| class | 列印 |
|---|---|
| .visible-print | 可見 可列印 |
| .hidden-print | 隻對浏覽器可見 不可列印 |
執行個體：調整浏覽器的視窗大小，或者在不同的裝置上加載執行個體，測試響應式實用工具類
複制
<!DOCTYPE html> <html> <head> <title>Bootstrap 執行個體 - 響應式實用工具</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container" style="padding: 40px;"> <div class="row visible-on"> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-xs">特别小型</span> <span class="visible-xs">✔ 在特别小型裝置上可見</span> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-sm">小型</span> <span class="visible-sm">✔ 在小型裝置上可見</span> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-md">中型</span> <span class="visible-md">✔ 在中型裝置上可見</span> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-lg">大型</span> <span class="visible-lg">✔ 在大型裝置上可見</span> </div> </div> </body> </html> 複制
釋出者：全棧程式員棧長，轉載請注明出處：https://javaforall.cn/170364.html原文連結：https://javaforall.cn