Question

我的目标是在网站上显示一个大按钮，以便在移动设备上显示。我希望它在屏幕最大宽度为600px时显示。另外，我已经和同学们写了一些代码。

我们希望它在移动设备上显示div标签。我们非常喜欢你的指导，谢谢你。

@media screen and (width:600px;){
.button {
display: url(http://examplepicture.com/blablabla);
   }
}

Answer 1

@media screen and (max-width:600px){
   .button {
      display: block; /* alternatively inline-block */
   }
}

在手机上展示。然后，您可以在主css文件中设置“默认”设置，以隐藏该div：

.button {
   display: none;
   background-image: url('http://examplepicture.com/blablabla');
   /* other properties go here */
}

这会使.button类对象隐藏在大于600px的视口上，如果更低则可见。

Demo

Answer 2

没有“css = mobile”之类的东西。您必须将一些css规则绑定到屏幕分辨率。

由于所有手机都有不同的屏幕分辨率，因此您必须主观地选择一个限制，您认为该屏幕是移动屏幕。

把：

@media screen and (max-width:600px){
   .button {
      display: block;
   }
}

将按钮类显示在分辨率小于600px的每个屏幕上，即移动或小窗口计算机浏览器。并且它不会显示在宽度超过600像素的平板电脑上。

台式计算机上的任何Windows或Linux或MacOS用户如果缩小浏览器的窗口，都可以看到网站的“移动”版本。

编辑：我更新了代码。

Answer 3

确保在HTML的<head>部分中显示此内容：

<meta name="viewport" content="width=device-width, initial-scale=1">

你的css中有一些语法错误。试试这个：https://jsfiddle.net/DIRTY_SMITH/esptpmwk/8/

@media (max-width:600px){
.button {
width: 200px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/");
   }
}

如果您希望按钮在600px上不可见，请执行以下操作：https://jsfiddle.net/DIRTY_SMITH/esptpmwk/10/

.button {
display: none;
width: 200px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/");
}
@media (max-width:600px){
.button {display: inline;}
}

Answer 4

第1步：<meta name="viewport" content="width=device-width, initial-scale=1">

第2步：<div class="onphone">Hello</div>

第3步：

.onphone{display:block;}

@media screen and (max-width:768px){

.onphone{display:none;}

}

Answer 5

为移动设备制作单独的CSS表格通常会更好......在这种情况下，您可以为CSS工作表选择媒体选择器...这基本上是我在大多数情况下使用的

<!-- Desktop: Firefox , Chrome , IE -->
<link rel="stylesheet" media="all and (min-device-width:769px)"href="/CSS/Style.css"/>
<!-- Mobile devices: phone and ipad -->
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)"href="/CSS/phone_portrait_style.css" />
<link rel="stylesheet" media="all and (max-device-width: 640px) and (orientation:landscape)"href="/CSS/phone_landscape_style.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)"href="/CSS/ipad_portrait_style.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)"href="/CSS/ipad_landscape_style.css" />

然后，在每个工作表中，您可以创建要在任何您喜欢的特定设备上显示的CSS。因此对于手机而言，按钮在纵向时可能是240像素，而在风景中则是320像素。

请注意，因为你拥有它的方式，如果分辨率正好 600px，那么你的CSS手机只会显示。

您还应该注意，在您的移动肖像css表中，您应该：

.button {
   display: block; 
   width:100px;
   background-image: url('http://examplepicture.com/blablabla');
}

并在桌面css中：

.button {
   display: none;
}

如果您不喜欢这种方法，我只是想为不同的手机/平板电脑方向为不同大小的按钮获取奖励积分;）

关于手机肖像css

.button{
   display: block;
   width:200px;
   background-image: url('http://examplepicture.com/blablabla');
}

和BAM！你有一些设备反应的CSS表，会给妈妈和爸爸留下深刻的印象！

CSS - 如何在移动设备上显示对象？

5 个答案: