如何让css在移动设备上显示图像，而不是在桌面上显示
如何让css在移动设备上显示图像，而不是在桌面上显示
提问于 2021-10-13 07:12:20
你好，我正在创建一个有趣的网站(我很无聊)，我正在使用css的媒体查询使它响应，但我遇到了一个问题，我已经有一个标题在html桌面和第二个标题为移动设备，我希望第二个标题(移动)是显示在移动设备上，但不是在桌面上这里是我的home.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Beast Code's</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</head>
<body>
<div class="conatiner-1">
<div class="container">
<div class="title">
<h1>I am CaptainBeast</h1>
</div>
<div class="avatar">
<img src="stuffs/pfp.jpg">
</div>
<div class="mobile-t">
<h1>Hello i am CaptainBeast</h1>
</div>
</div>
</div>
</body>
</html>我的style.css
*{
margin: 0;
padding: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
.conatiner-1{
height: 100vh;
width: 100%;
background-image: url(stuffs/background.png);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.title{
font-size: 36px;
font-family: 'Oswald', sans-serif;
color: blue;
margin-left: 425px;
top: 100px;
position: relative;
}
.title {
border-right: solid 3px rgba(0,255,0,.75);
white-space: nowrap;
overflow: hidden;
font-family: 'Source Code Pro', monospace;
font-size: 28px;
color: rgba(90, 145, 207, 0.7);
}
/* Animation */
.title {
animation: animated-text 4s steps(29) 1s 1 normal both,
animated-cursor 600ms steps(29) infinite;
}
/* text animation */
@keyframes animated-text{
from{width: 0;}
to{width: 580px;}
}
/* cursor animations */
@keyframes animated-cursor{
from{border-right-color: rgba(0,255,0,.75);}
to{border-right-color: transparent;}
}
@media only screen and (min-width: 900px){
.avatar img{
display: none;
}
}
.title-m{
overflow: hidden;
}
.mobile-t{
display: none;
}
@media screen and (max-width: 400px){
.container{
overflow: hidden;
}
.conatiner-1{
height: 100vh;
width: 100%;
background-image: url(stuffs/background.png);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.avatar img{
border-radius: 50%;
height: 300px;
width: 320px;
position: relative;
left: 1000px;
top: 60;
image-resolution: from-image;
}
.mobile-t{
font-size: 16px;
}
}希望我能得到一个很好的答复，谢谢！
回答 1
Stack Overflow用户
发布于 2021-10-13 07:38:00
我已经在一些项目中使用了它，它实际上对我很有效。要在移动设备上制作分区节目，请执行以下操作：
<div class="mobileShow">
TEXT OR IMAGE FOR MOBILE HERE
</div>
<style type="text/css">
.mobileShow { display: none;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileShow { display: inline;}}
</style>要在移动设备上隐藏部分，请执行以下操作：
<div class="mobileHide">
TEXT OR IMAGE NOT FOR MOBILE HERE
</div>
<style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69551142
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号