两种方法

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

css 识别屏幕大小自适应相关推荐

根据屏幕大小自适应根字体大小
首先获取根节点 var html = doc.getElementsByTagName("html")[0], (orientationchange->手机屏幕转屏事件) ( ...
CSS中字体大小随屏幕大小自适应变化
1.通过媒体查询的方式 @media (min-width:0px){html{font-size:12px;} } @media (min-width: 320px){html{font-size: ...
css实现文字大小自适应
在页面编写中经常会碰到页面自适应的问题,也就是页面内部的元素会随着窗口的放大缩小而放大缩小,box可以通过calc + 百分比的形式做到页面自适应,但是box内的字体却无法做到这点,往往box自适应大 ...
css根据屏幕大小切换样式
首先html head之间加入: <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, ma ...
vue里面使用echarts实现根据浏览器屏幕大小自适应
1- 安装 echarts 依赖 npm install echarts -S 2- 创建图表全局引入在main.js 中写 import echarts from 'echarts' Vue.pr ...
根据屏幕大小加载css,css根据屏幕大小切换样式
20145308刘昊阳 <Java程序设计>实验五报告 20145308刘昊阳实验五 Java网络编程及安全实验报告实验名称 Java网络编程及安全实验内容 1．掌握Socket程 ...
vue页面自适应屏幕宽高_vue组件页面高度根据屏幕大小自适应
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
css 随着屏幕大小字体随之变化
@media (min-width: 576px) { .contract-way{ font-size: 18px; } } @media (min-width: 768px) { .contrac ...
html自动适应屏幕分辨率,css如何自适应屏幕大小？
css如何自适应屏幕大小?下面本篇文章给大家介绍一下使用CSS实现屏幕大小自适应的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何自适应屏幕大小? 要想实现css屏幕 ...
html5移动页面自适应手机屏幕大小,页面完美自适应移动端屏幕的方法
码农公社 210.net.cn 210是何含义?10月24日是程序员节,1024 =210.210既 210 之意. 移动端由于展示区域比较小,页面在不同分辨率手机上的展示细节也被要求得更加严格, ...

css 识别屏幕大小自适应

（1）原生自适应 @media screen

（2）使用bootstrap 的 hidden-xs

其他

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

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

打印类

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

css 识别屏幕大小自适应相关推荐

最新文章

热门文章

css 识别屏幕大小自适应

（1）原生自适应 @media screen

（2）使用bootstrap 的 hidden-xs

其他

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

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

打印类

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

css 识别屏幕大小自适应相关推荐

最新文章

热门文章

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