（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

其他

响应式布局：响应式工具不能用于table元素，而且本身就不支持

响应式布局需要在<head>处添加如下语句：

在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	只对浏览器可见不可打印

实例：调整浏览器的窗口大小，或者在不同的设备上加载实例，测试响应式实用工具类

   Bootstrap 实例 - 响应式实用工具 
        
    
     
      
      特别小型 
      ✔ 在特别小型设备上可见 
     
 
      
      小型 
      ✔ 在小型设备上可见 
     
 
     
 
      
      中型 
      ✔ 在中型设备上可见 
     
 
      
      大型 
      ✔ 在大型设备上可见

转载地址：https://liuhuiyao.blog.csdn.net/article/details/78840633 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：关于字节流（byte流）读取大小端的问题

下一篇：Spring Boot–thymeleaf模板

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

（1）原生自适应 @media screen

（2）使用bootstrap 的 hidden-xs

其他

响应式布局：响应式工具不能用于table元素，而且本身就不支持

以下这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏

打印类

实例：调整浏览器的窗口大小，或者在不同的设备上加载实例，测试响应式实用工具类

发表评论

最新留言

关于作者

推荐文章

（1）原生自适应 @media screen

（2）使用bootstrap 的 hidden-xs

其他

响应式布局：响应式工具不能用于table元素，而且 本身就不支持

以下这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏

打印类

实例：调整浏览器的窗口大小，或者在不同的设备上加载实例，测试响应式实用工具类

发表评论

最新留言

关于作者

推荐文章

响应式布局：响应式工具不能用于table元素，而且本身就不支持