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)


相关推荐

  • 文件读取(FileInputStream 读取本地文件)

    文件读取(FileInputStream 读取本地文件)使用FileInputStream读取本地文件(图片、视频、音乐、文档资料)二进制文件、文本文件1.在物理存储上上没有什么区别,存在硬盘上都是以二进制方式存储2.解释数据的逻辑不同,程序读取文本文件,可以以字符方式读取,也可以以字节读取,将读取的数据解释为ASCII或者unicode编码;当程序读取二进制文件,以字节方式读取,对读取数据的解释由读取数据而定,如读取图片时,需要了解文件的结…

  • Python玩转emoji表情 一行代码的事儿!

    Python玩转emoji表情 一行代码的事儿!Python可以实现emoji表情一行代码的事儿!有时候在代码中加入一些有趣的操作可以使得友好度UP好几个LEVEL,正好了解到Python支持emoji表情的输出,实现方式相当简单。

  • vgg网络论文_dna结构综述论文

    vgg网络论文_dna结构综述论文原文地址:https://arxiv.org/pdf/1409.1556.pdfVGG简介:VGG卷积神经网络是牛津大学在2014年提出来的模型。当这个模型被提出时,由于它的简洁性和实用性,马上成为了当时最流行的卷积神经网络模型。它在图像分类和目标检测任务中都表现出非常好的结果。在2014年的ILSVRC比赛中,VGG在Top-5中取得了92.3%的正确率。同年的冠军是googl…

    2022年10月21日
  • 微信表情符号已写入判决书怎么删除_微信100个表情符号含义

    微信表情符号已写入判决书怎么删除_微信100个表情符号含义本文转载自IT之家,IT之家3月3日消息据法治日报报道,如今表情符号已经成为呈堂证供的一部分,登上多地法院判决书等司法文书。报道称,在广东省深圳市中级人民法院发布的一份民事判决书中,对一起涉及微信表情的合同纠纷案作出了判决。作为创作者的卢泓于2018年4月24日向深圳市道一影业集团有限公司法定代表人田民发送其创作的歌词。后者表明其在路上后,发送了微信表情符号[强]。“结合双方的前后聊天内容,一审法院认为该微信表情符号[强]并非是对卢泓歌词的认可,而是属于礼貌性回复,不能

    2022年10月22日
  • ActiveMQ简介与安装

    1.ActiveMQ简介ActiveMQ是一种开源的,实现了JMS1.1规范的,面向消息(MOM)的中间件,为应用程序提供高效的、可扩展的、稳定的和安全的企业级消息通信。ActiveMQ使用Apa

    2021年12月28日
  • android之存储篇_SharedPreferences存储方式

    SharedPreferences是一种轻型的数据存储方式,它的本质是基于XML文件存储key-value键值对数据,通常用来存储一些简单的配置信息。其存储位置在/data/data//shared_prefs目录下。SharedPreferences对象本身只能获取数据而不支持存储和修改,存储修改是通过Editor对象实现。实现SharedPreferences存储的步骤如下:  一、根据C

发表回复

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

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