css页面自适应屏幕大小_html图片自适应屏幕

css页面自适应屏幕大小_html图片自适应屏幕两种方法(1)原生自适应@mediascreen表示当屏幕大于320px,并小于1156px是执行下面的css@mediascreenand(min-width:320px)and(max-width:1156px){ .site-bg-dl{ position:fixed; height:100%; widt

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

两种方法

 

(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页面自适应屏幕大小_html图片自适应屏幕

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

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> 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170364.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号