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

/* 大屏幕 :大于等于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:

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

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享