如何通过css媒体查询隐藏在页面上的多个位置使用的类，*仅对特定元素使用*
通过CSS媒体查询可以根据设备的屏幕尺寸、分辨率或其他特性来隐藏页面上的多个位置使用的类，只对特定元素使用。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认样式 */
.my-class {
display: block;
}
/* 在小屏幕上隐藏 */
@media screen and (max-width: 600px) {
.my-class {
display: none;
}
}
</style>
</head>
<body>
<div class="my-class">这是一个需要隐藏的元素</div>
</body>
</html>在上面的示例中，.my-class 是一个需要隐藏的类。通过媒体查询 @media screen and (max-width: 600px)，我们可以指定在小屏幕设备上（屏幕宽度小于等于600像素）隐藏该类。当屏幕宽度满足媒体查询条件时，.my-class 的 display 属性被设置为 none，从而隐藏了该元素。
这种方法可以用于响应式设计，根据不同设备的屏幕尺寸来隐藏或显示特定元素，以提供更好的用户体验。
腾讯云相关产品和产品介绍链接地址：
请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估。
相关·内容
5回答
使用媒体查询显示和隐藏
html、css
假设我有两个带有两个类的div：.cat和.rat，我想：
计算机视图：.cat正在隐藏.rat正在显示
移动视图.cat显示.rat正在隐藏
这些是我的代码，但似乎我不能实现它。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
@media screen and (min-width: 600px) {
.cat
{display: none;}
}
.rat
{width: 300px;
浏览 1提问于2017-04-12得票数 2
1回答
默认@媒体查询样式
html、css、responsive-design
媒体查询的特殊性是什么？为什么删除封装最小屏幕宽度的媒体查询覆盖小屏幕的媒体查询？
<style>
@media only screen and (max-width: 600px) {
table,tr,td {
width:100%;
margin:0 0 ;
/* background-color: #CCFF33 !important; */
}
img {
max-width: 100%;
height: auto;
}
}
@media only screen and (min-width: 600px)
浏览 3提问于2016-04-07得票数 0
回答已采纳
1回答
React中的ParticlesJS组件被隐藏在媒体查询中，但不会返回显示。
javascript、css、reactjs、media-queries、particles.js
我正在为我的ParticlesJS应用程序使用ReactJS包。它在一开始就显示出来。当屏幕尺寸小于600 to时，我想隐藏它。它将显示设置为none，但是当屏幕调整到600 is以上时，粒子元素不会将显示设置为块，因此不会再次显示。
html/jsx：
<div className="particles-container">
<Particles params={particleParams} className="particles" />
<div className="home-banner-conte
浏览 0提问于2018-09-13得票数 0
回答已采纳
2回答
如何在CSS中放置图片而不是视频？
html、css
在旋转木马中有3个视频，在CSS中我为屏幕小于600px的设备编写了媒体查询display:none;
@media screen and (max-width: 600px) {
.video {
overflow: hidden;
max-width: 100%;
position: relative;
vertical-align: top;
height: 100%;
width: 100%;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
浏览 0提问于2019-04-11得票数 1
2回答
无法在桌面上查看媒体查询，但在检查页面时能够查看它。
html、css、google-chrome、media-queries
我正在学习一个关于媒体查询的教程。当我在Chrome/Firefox中打开HTML时，我会得到一个空白页面，什么都不会显示。但是，当我检查页面时，代码会正常显示，我可以看到媒体查询是如何工作的。我尝试调整媒体查询的最小宽度和最大宽度，但在我使用的任何浏览器中仍然有一个空白页。我已经张贴了原来的HTML从教程下面。
<!DOCTYPE html>
<html>
<head>
<title>Beginners CSS - Chapter 8</title>
<style type="text/css
浏览 3提问于2022-09-03得票数 1
1回答
媒体查询被卡住
html、css、media-queries
我正在尝试利用媒体查询来隐藏或取消隐藏HTML中的div：
<div class="hide-medium hide-large">Test</div>
使用以下CSS：
@media screen and (min-width: 994px){
.hide-large{
display:none
}
}
@media screen and (max-width: 993px){
.hide-medium{
display:none
}
}
@media screen and (max-wi
浏览 0提问于2018-09-28得票数 1
1回答
基础媒体查询-只为小范围隐藏
css、zurb-foundation
只对小的隐藏是最大宽度0- 39.9375em。
但“小秀”只在零时40分。
小的隐藏不应该是0-40 is吗，因为这是..show for小国的号码吗？为什么这两个查询的最大宽度不同。
@media screen and (max-width: 39.9375em) {
.hide-for-small-only {
display: none !important; } }
@media screen and (max-width: 0em), screen and (min-width: 40em) {
.show-for-small-only {
display
浏览 4提问于2017-04-09得票数 1
1回答
Display: none -在移动设备上显示，但不在桌面上显示
html、css、mobile、desktop
我正在尝试使用display: none，因此元素将在较小的分辨率(或移动设备)上显示，而不是在较大屏幕尺寸的主css上显示。
我认为它不显示可能是合乎逻辑的，但我想不出一种方法来解决这个问题。
footer {
display: none;
}
@media handheld and (max-width:480px),
screen and (max-device-width: 480px),
screen and (max-width: 600px)
{
footer {
background-color: #colour;
position:fixed;
浏览 0提问于2012-08-17得票数 1
回答已采纳
4回答
如何在调整屏幕大小时显示菜单下拉菜单
html、css、drop-down-menu、responsive-design
当屏幕宽度减小时，我尝试将所有菜单链接放在一个下拉菜单中。
到目前为止，我所做的是在表单中为菜单下拉菜单编写HTML代码
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" class="mobile_form">
<select name="order" class='mobile_menu'>
<option value =
浏览 0提问于2013-01-02得票数 0
回答已采纳
4回答
对于不同的元素或不同的宽度，多个媒体查询更好吗？
css、responsive-design
我正在创建一个响应站点，我目前正在进行一些媒体查询。我一边写一边写，例如：
.status-reply-disabled {
color: #B1B1B1;
font-size: 14px;
margin-top: 10px;
position: absolute;
margin-left: 65px;
}
@media screen and (max-width: 600px) {
.status-reply-disabled {
font-size: 10px;
margin-left: 35px;
}
}
过一会儿我会有这样的东西
浏览 0提问于2017-07-29得票数 3
回答已采纳
1回答
我有一个不同的标题，我想为不同的屏幕大小。我在让@media查询工作或理解它们时遇到了困难。现在我有一个硬编码的标语。对于宽屏幕，我有更大的图像。更小的另一个。我不能让这个小图像在宽屏上消失。
以下是我的媒体查询
@media only screen and ( min-width: 768px ) and ( max-width: 960px )
@media only screen and ( max-width: 960px )
@media only screen and ( max-width: 767px )
@media only screen and ( m
浏览 0提问于2015-03-23得票数 0
回答已采纳
2回答
媒体查询不起作用(提供代码)
html、css、media-queries
由于某种原因，我无法让我的媒体查询工作..。有人能解释一下发生了什么事吗？
屏幕尺寸为241 (铬，即，ff)
CSS
@media screen and (max-width: 500px)
{
body
{
width: 100%;
background-color: black;
}
#header
{
display: none;
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-
浏览 5提问于2014-06-03得票数 1
回答已采纳
2回答
最大到最小媒体查询CSS
html、css、media-queries
我正在尝试使用移动优先的方法进行响应式设计。
在这样做的时候，我希望将我的MAX媒体查询转换为MIN媒体查询。
因此，我的目标是实现渐进式增强，而不是使用优雅的降级
谁能解释一下重新设计CSS的最佳方法是使用最小宽度的媒体查询，而不是最大宽度的媒体查询？
在下面的示例中，我删除了95%的css，并保留了断点
//
html {
box-sizing: border-box; /* apply borderbox to * */
}
*, *:before, *:after {
box-sizing: inherit;
}}
//
@media screen and (max
浏览 0提问于2014-12-04得票数 0
1回答
用CSS媒体查询隐藏元素
css、media-queries
我想知道什么是使CSS类系统响应屏幕大小隐藏元素的正确方法。
我目前的方法是使用这样的媒体查询：
/* From 768 to 1023 px */
@media (min-width: @screen-sm) and (max-width: (@screen-md - 1))
{
.hide-sm { display: none; }
}
/* From 1024 to 1199 px */
@media (min-width: @screen-md) and (max-width: (@screen-lg - 1))
{
.hide-md { display: none
浏览 3提问于2017-05-08得票数 3
1回答
不要预览菜单中的第一项
javascript、html、css
在这个 (下面复制的代码)中，总是显示第一个条目"Home“。当窗口足够小时，我如何像其他所有的一样隐藏"Home“项？
非常感谢所有的帮助，谢谢。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-seri
浏览 0提问于2018-04-10得票数 0
回答已采纳
4回答
我应该使用CSS或Javascript来显示取决于屏幕大小的信息吗？有什么关系吗？
javascript、css、mobile、responsive-design
我想知道，根据设备的屏幕大小，选择显示哪些信息更正确，无论是<video>还是<img>标记。想知道使用CSS、JavaScript或其他方法是否更好
更好的做法是使用JavaScript，比如
var screenSize = screen.width;
if (screenSize >= 500) {
//display image or video or text
} else if (screenSize >= 1000) {
//dislpay a different image or video or text
} else {
浏览 2提问于2019-05-03得票数 0
回答已采纳
1回答
如何在设备屏幕上显示特定菜单列表
css、media-queries
我正在尝试创建一个响应式的电子邮件导航菜单，其中菜单列表将显示但不包括桌面屏幕上的商店e-conolight，但在移动设备上，它将只显示商店e-conolight和销售。
<li><a class="non-mobile" title="" href="#">LED Lightning</a></li>
<li ><a class="non-mobile" title="" href="#">Linear Fluorescent
浏览 0提问于2013-05-31得票数 0
回答已采纳
2回答
当我缩小我的网站时，我如何隐藏我的导航条？
html、css、navbar、display、mobile-website
我现在正在做一个基本的网站，当我缩小网站的时候，我想让我的Navbar消失。
但它并没有消失，我不知道为什么图片显示我的导航栏后，我放了code[][1]
这是我的密码
@media screen and (max-width: 600px) {
ul.topnav li:not(:nth-child(1)) {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<title>Nai Cha Life</title>
&l
浏览 11提问于2022-04-18得票数 0
3回答
滑出导航不起作用
javascript、html、css
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
浏览 0提问于2017-07-19得票数 3
1回答
媒体查询似乎不起作用
html、css、responsive-design
不知道为什么这不管用。有什么想法吗？
当屏幕低于700 is时，背景色不变，HeaderImg仍在显示。
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
#content {
text-align:center;
width:100%;
margin:0;
paddi
浏览 1提问于2014-12-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
