标签: media-queries

我正在开发一个网站，我希望搜索按钮在所有移动设备和平板电脑设备上看起来都相同。我为此创建了小提琴。我用于搜索按钮（用于手机/平板电脑视图）的代码是：

@media only screen and (max-width: 767px) {
  #gv_search_button_2777 {
    padding-left: 5.5%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    padding-right: 5.5%;
    background-color: white;
    font-size: 12px;
    border-radius: 3.5px;
    border: 1px solid #ccc!important;
  }
}

<div class="gv-search-box gv-search-box-submit">
  <input type="hidden" name="mode" value="all">
  <input type="submit" class="button gv-search-button" id="gv_search_button_2777" value="Search">
</div>

问题陈述：

如果我从实际浏览器中的移动视图中获取上述小提琴，它看起来不错，但如果我从手机上看到它，它看起来会有所不同。

这是我想在所有移动设备上查看的“搜索”按钮的屏幕截图：

我想知道我需要对小提琴中的 CSS 代码进行哪些更改，以便上面的屏幕截图出现在所有设备上。

在我的 iphone 上检查 safari 和 chrome 时，我看到了这个（这是不正确的）：

我很好奇我的媒体查询出了什么问题。我只想要一种用于“相当小屏幕”的样式和一种用于“相当大屏幕”的样式。所以我做了以下事情：

@media (min-width: 501px) {
    #courtName {
        font-size: 17px;
    }
    #courtInfoWindow {
        font-size: 13px;
    }
}

@media (max-width:500px) {
    #courtName {
        font-size: 64px;
    }
    #courtInfoWindow {
        font-size: 40px;
    }
}

我希望最小宽度尺寸显示在“大屏幕”上，最大宽度尺寸显示在小屏幕上（小于 500 像素）。然而，较小的尺寸显示在所有屏幕尺寸上。我尝试仅使用一个媒体查询来覆盖默认大小。尝试切换顺序。什么都不起作用。是什么赋予了？

我正在研究我的响应式设计。这就是我的 @media 断点：

@media (max-width:800px) and (min-width:400px)  {

  #section {
    padding: 0px;
    padding-top:100px;
  }
  .text {
    text-align: center;
    padding-left: 50px;
    width:350px; 
  }
  .headline{
    height: 50px;
    width: 350px;
    text-align: center;

  }
  .header {
    padding-top: 200px;
    background-color: lightgrey;
  }
  .w-70 {
    width: 20%;
    background-color: blue;
  }
  .w-15 {
    width: 40%;
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
.header {
    height:350px;
    background-color: red;
    font-size: 2em;
  }
.w-70 {
    display: none;
  }
  .w-15 {
    width: 40%;
  }
}

当我手动调整浏览器大小以测试 Chrome 中的响应能力时，一切正常并且断点相对应。当我使用Chrome Inspection工具中的“响应式”功能进行测试时，第一个断点： …

所以我想知道如何在 TailWindCSS Config 中设置最大高度媒体断点。iPad Pro 因其宽度而被视为笔记本电脑。也就是说，它们对于笔记本电脑 CSS 来说太高了，让我的网站看起来很糟糕。

欢迎任何帮助，谢谢，贾斯汀。

<Main/>有一个可选的 prop isFirstPage，所以如果它有这个 prop，它将与媒体查询一起使用。下面的代码片段工作正常，但我认为有更好的解决方案。

export default styled(Main)`
  ...my styles...
  ${props => props.isFirstPage && '@media only screen and (max-width: 480px) {padding: 16px}'}
`;

首先，我不得不说我已经检查了有关此问题的其他问题（例如this和this），并且我相信我的问题与这些问题不同，并且这个问题不是这些问题的重复。

我的 CSS 文件中有一些媒体查询，如下所示：

@media only screen and (max-width: 767px) { /*css here*/}

当我检查 chrome 检查器时，我可以看到这些 CSS 角色永远不会应用于所需的元素。我尝试在检查器模式下调整屏幕大小，但这些 CSS 角色仍然不适用。知道什么可能会导致这里的问题吗？

编辑

这是我使用的整个 CSS 块。我正在使用 SCSS 语法，我可以看到生成的 CSS 角色完全正常，并且我获得了正确的filter-title-responsive类角色。

.filter-panel-container {
  @extend %select-input-fix;
  @extend %date-input-fix;
  width: 100%;
  height: auto;

  .filter-header-container {
    height: 40px;
    width: 100%;
    border-radius: 5px 5px 0 0;
    background-color: $theme_athens_gray_color;

    padding-top: 10px;
    padding-bottom: 11px;
    padding-left: 16px;

    display: flex;
    flex-direction: row;
    justify-content: start;

    & * {
      color: $theme_gulf_blue_color;
    }

    i {
      margin-top: 2px;
    } …

一个来源

在 Keith J. Grant 的CSS in Depth中，第 8.2 节我读到

\n

根据浏览器的默认字体大小（通常为 16 像素），在媒体查询中使用 em 是更好的主意。

\n

我很想理解em媒体查询中的 s是基于浏览器的默认字体大小，如果我错了，请纠正我，否则这句话会暗示我负责要求em基于字体大小，示例代码中没有任何暗示类似的内容。

另一个来源

另一方面，从我读到的规格来看

\n

实施例27

\n

[\xe2\x80\xa6]

\n

@media (min-width: 20em) { \xe2\x80\xa6 }\n

Run Code Online (Sandbox Code Playgroud)\n

该em值是相对于 的初始值而言的font-size。

\n

如果我单击该链接，我就会看到该font-size属性的定义，我在其中读到它的初始值为medium。

我的解读

\n
• 第一个消息来源说，1em在@media查询中是浏览器的默认字体大小；
\n
• 第二个来源说这1em就是initial的值font-size。 …

请帮助我如何使用IE浏览器的媒体查询？我遇到过一个jquery库:http://plugins.jquery.com/project/MediaQueries但是我无法下载这个库.

我正在尝试开发一个应该在所有智能手机,平板电脑和一些功能手机上运行的移动应用程序.我之前使用过CSS3媒体查询,并在Android和iOS中进行过测试,它的工作方式就像魅力一样.但是诺基亚和Bada OS呢,这有用吗？

我目前正在处理的网站没有为我的样式设置为低于480px的Chrome设备,但是在firefox中运行,chrome正在接收800px和1200px的媒体查询,我不能为我的生活弄明白为什么它没有拿起480px媒体查询.

请参阅下面的样式表.

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

.ui-tabs .tab {
    clear:both; 
    height:386px; 
    width:550px; 
    margin:0 auto;
}

.ui-tabs .groundFloor {
    background:url(img/groundFloor_550.jpg) top center;
}

.ui-tabs .firstFloor {
    background:url(img/firstFloor_550.jpg) top center;
}

.ui-tabs .secondFloor {
    background:url(img/secondFloor_550.jpg) top center;
}

}


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

#slide1 h1.logo {
    width:350px;
}

.mainnav {display:none;}
.navMobile {display:block;}

.navMobile {
    height:auto;
}

.navMobile .menuBox {
    height:auto;
    min-height:40px;
    width:100%;
    display:inline-block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:#fff;
    z-index:99999;
}

.navMobile .menuBox ul {
    display:block;
    clear:both;
    height:auto;
    width:100%;
    padding:0;
    margin:0; …