css 识别屏幕大小自适应

来源：互联网发布：淘宝御泥坊编辑：程序博客网时间：2024/05/24 04:45

两种方法

（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>

阅读全文

0 0

css 识别屏幕大小自适应

（1）原生自适应 @media screen

（2）使用bootstrap 的 hidden-xs

其他

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

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

在css中添加如下内容可以分别定制不同屏幕的显示样式：

响应式布局辅助class：

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

打印类

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

css 识别屏幕大小自适应

（1）原生自适应 @media screen

（2）使用bootstrap 的 hidden-xs

其他

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

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

在css中添加如下内容 可以分别定制不同屏幕的显示样式：

响应式布局辅助class：

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

打印类

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

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

在css中添加如下内容可以分别定制不同屏幕的显示样式：