我的目标是让一个大按钮在移动设备上显示在网站上。我希望它在屏幕最大宽度为 600 像素时显示。另外，我和同学一起写了一些代码。
我们希望它在移动设备上显示 div 标签。 我们希望得到您的指导，谢谢。
@media screen and (width:600px;){
.button {
display: url(http://examplepicture.com/blablabla);
}
}
【问题讨论】：
url 不是有效的display value
@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 的视口上隐藏，如果小于600px，则可见。
【讨论】：
没有“css = mobile”这样的东西。您必须将一些 css 规则绑定到屏幕分辨率。
由于所有手机都有不同的屏幕分辨率，因此您必须主观地选择一个您认为屏幕是手机的限制。
推杆：
@media screen and (max-width:600px){
.button {
display: block;
}
}
将在分辨率小于 600 像素的每个屏幕上显示按钮类，可以是移动设备或小型窗口计算机浏览器。而且它不会在宽度超过 600 像素的平板电脑上显示。
桌面计算机上的任何 Windows、Linux 或 MacOS 用户只要缩小浏览器窗口，就可以看到网站的“移动”版本。
编辑：我更新了代码。
【讨论】：
确保您在 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;}
}
【讨论】：
css 文件中，然后在媒体查询中只有更改的属性。只是一个想法。
第 1 步：<meta name="viewport" content="width=device-width, initial-scale=1">
第二步：<div class="onphone">Hello</div>
第三步：
.onphone{display:block;}
@media screen and (max-width:768px){
.onphone{display:none;}
}
【讨论】：
通常最好为移动设备创建单独的 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 像素。
请小心，因为按照您的方式，您的手机 CSS 只有在分辨率为恰好 600px 时才会显示。
您还应该注意，在您的移动肖像 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 表单，它们会给爸爸妈妈留下深刻印象！
【讨论】：