标签: media-queries

我目前正在为我的响应式网站设计搜索框，但由于设计原因，单击扩展搜索框不适合特定区域。所以，我想让这个搜索框被另一个按钮替换，然后在不同的地方显示一个搜索框。

如何用媒体查询或 jquery 替换 div？

我有奇怪的问题。我完成了一个网站，并使用 quirktools 中的 screenfly 来查看它在平板电脑和智能手机上的显示效果..... 看起来不错

当我在智能手机或平板电脑上实际查看该网站时，它以桌面版本显示该网站...媒体查询不起作用...我在手机上尝试了 chrome、firefox、opera，但没有一个显示我的网站移动版。

朋友你能告诉我什么可能是错的吗？

我在我的 css 文件中使用简单的媒体查询

我想要构建的是一个允许用户调用的按钮。在桌面上，这个元素看起来像一个大的号召性用语，

那么在移动设备上，这将既是号召性用语，又是实际要调用的方法。

我现在需要解决的挑战是，只能在移动设备上使用呼叫功能。这是我当前的代码：

<div id="headerCTA">
  <div>
    <a href="tel:888-336-1301">
      <div>
        Schedule a pickup<br>
        888-336-1301
      </div>  
    </a>
  </div>
</div> 

[GitHub 上的代码要点 - 用于附加评论]

但是，当在桌面上时（由屏幕宽度决定？），此链接应该被停用。目前，如果有人碰巧从桌面点击此按钮，它会尝试打开一个页面“tel:888-336-1301”

这会产生以下错误：

该地址无法理解 Firefox 不知道如何打开该地址，因为协议 (tel) 未与任何程序关联。

我正在设置响应式站点的初始基础。我已经指定了手机和平板电脑的尺寸，但不确定如何处理桌面版本：

移动的

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

}

药片

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}

这两个在尺寸方面设置是否正确（根据大致的行业标准，我知道没有这样的标准！）？如何为桌面指定 1024px 以上的版本？

/* Mobile */
@media (min-width:320px) { 

    .tester {
        width:100%;
        height:500px;
        background-color:white;
    }
}

/* Tablet */
@media (min-width:640px) {

    .tester {
        width:100%;
        height:500px;
        background-color:red;
    }   

}

/* Desktop */
@media (min-width:960px) {

    .tester {
        width:100%;
        height:500px;
        background-color:blue;
    }   

}

<iframe height=468 width=1584 src="//docs.google.com/spreadsheets/d/1hUgiZqpgjqqtpnYY6Q1IeoUYlpXlCRUeARpN3cWX87g/gviz/chartiframe?oid=2131305794" seamless frameborder=0 scrolling=no></iframe>

即使将宽度更改为 100% 后，它也不会使其响应。我将此图嵌入到 WordPress 网站上。

我正在尝试使用媒体查询使 div 在网站上响应（使用 IE11）。

这是我的CSS：

@media screen and (max-width: 400px) { // Tried with "only screen" also

  .divStyle {
      background-image:none;
      background-color:red;
      background-position:right;
      color:#fff!important;
      height:140px;
      position:relative;
      top:-6px;

    }

}

.divStyle {
  background-image:url('/images/image.jpg');
  background-position:right;
  color:#fff!important;
  padding:20px;
  height:190px;
  position:relative;
  top:-6px;

}

我还在 Head 部分添加了元标记。

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

但当我调整窗口大小时它仍然没有响应。

我试图在某个部分断线，只显示在移动屏幕上。

我所取得的成就：要么得到相反的效果，即在大屏幕上断线，而在小屏幕上则不然，无论我使用min-width与否max-width，或者它只是不做任何事情。

这是我要编辑的代码：

HTML：

<p class="text">In this line I would like<br class="brnodisplay"> a break on small screen<span>More info</span></p>

CSS：

.text {
    transition: all 1s ease;
    text-align: left;
    padding-left: 10%;
}

.text:hover {
    color: #fff;
    background: black;
}

.text span {
    display: block;
    float: right;
    clear: both;
    text-align: right;
    padding-right: 10%;
}

是否有可能在特定宽度/设备上“控制”这样的换行符？先感谢您。

关联：

http://jsfiddle.net/8xddb1h7/

希望是一个非常简单的问题.

我有三个@media(min-width)语句从移动开始并构建到桌面.由于某种原因,第三个声明不会触发.

示例:.imgbox {height:100px; 宽度:100px;}

@media (min-width: 768px) and (max-width: 899px)  { .imgbox { background-color:red; } } 

@media (min-width:900px) and (max-width: 1000px) {
        .imgbox { background-color:green;}
}?

@media (min-width:1001px) {
    .imgbox { background-color:blue;}
}?

JS Fiddle在这里显示效果:https://jsfiddle.net/t5vh316h/(将中心分隔线拖到不同的宽度,以便看到我的意思)

该框永远不会变为蓝色,最终查询似乎被忽略.为什么？!

谢谢.

媒体查询中的“唯一屏幕”代码是什么意思？

//See below the 'only screen' part of the code
@media only screen and (min-device-width: 320px)

我使用了没有代码的“唯一屏幕”部分的代码。它有什么作用或如何提供帮助？

即使我们使用角度材料来开发响应式应用程序，有人也能理解媒体查询的重要性吗？我们还需要担心吗？是材料没有为我们照顾它吗？