本文作者:温文曦

css 识别屏幕大小自适应

温文曦 09-17 682 抢沙发 百度已收录
css 识别屏幕大小自适应摘要: ...

两种方法

(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中添加如下内容 可以分别定制不同屏幕的显示样式:



@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:

css 识别屏幕大小自适应 第1张


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

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

文章版权及转载声明

作者:温文曦本文地址:https://www.vience.cn/blog/634.html发布于 09-17
文章转载或复制请以超链接形式并注明出处文曦博客

赞(5
阅读
分享
 
取消

评论列表 (暂无评论,682人围观)参与讨论

还没有评论,来说两句吧...