两种方法
（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 只对浏览器可见 不可打印
暂无评论内容