标签: media-queries

当我们制作 iPad 专用网站（我正在为桌面用户制作不同的网站）并且我们还想为纵向和横向模式编写不同的 CSS 时，您会更喜欢哪种方法？

第一种方法

我们可以只用一个 http 请求来保留单个 CSS 文件

<link href="style.css" rel="stylesheet" type="text/css" media="all" />

并在内部使用媒体查询来保持代码分离

/* CSS for landscape here */

#wrapper {width:1024px}

/* CSS for portrait here */

@media only screen and (orientation:portrait){
#wrapper {width:768px}
}

第二种方法

我们可以使用 2 个 CSS 文件和 2 个 http 请求

<!--CSS for landscape-->
<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">

<!--CSS for portrait-->
<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">

您更喜欢哪种方法，如果您有任何改进建议，请告诉我们。

注意：我正在为 …

我正在使用响应式设计，在我的CSS中有例如三个不同的媒体查询与列表项样式：

@media only screen and (min-width : 1350px) {
    li.item:nth-child(n+6) {
        border-top: 1px solid #d9ddd3;
    }
    h1 {
        color: red;
    }
}

@media only screen and (min-width : 1550px) {
    li.item:nth-child(n+7) {
        border-top: 1px solid #d9ddd3;
    }
    h1 {
        color: green;
    }
}

@media only screen and (min-width : 1750px) {
    li.item:nth-child(n+8) {
        border-top: 1px solid #d9ddd3;
    }
    h1 {
        color: blue;
    }
}

因此，从第 6/7/8 个 li 项目开始，我添加了顶部边框。问题是：

• 对于 1350px 我得到 n+6
• 对于 1550px 我得到 n+6
• 对于 1750px 我得到 …

我正在使用 htmlcompressor ( https://code.google.com/p/htmlcompressor/#For_Non-Java_Projects ) 来缩小 HTML 内容（HTML 电子邮件模板）以及文档头部部分中的内联 CSS。我在 Windows 上通过命令行运行此命令：

java -jar /path/to/htmlcompressor --preserve-comments --preserve-line-breaks --compress-css --remove-surrounding-spaces min -p /path/to/minify-preserve.txt --type html original-html -o minified-output.html

在本文档中，有两个媒体查询，我需要防止 htmlcompressor 由于语法问题而进行修改。我环顾四周，发现了这个正则表达式规则：

@media[^{]+\{([\s\S]+?})\s*}

然而，它匹配媒体查询和之间的内容，理想情况下，我需要它仅匹配起始块和结束括号，因此它在这些区域中保留空格以获得有效语法。

这可以通过正则表达式实现吗？根据文档，我仅限于正则表达式，因为它是创建保存规则的唯一方法。

谢谢。

我正在学习 HTML / CSS，想知道如何使用媒体查询隐藏打印过程中的正文背景图像？

我正在将一个从头开始制作的网站转换为使用 Bootstrap 4 的响应式网站。在我意识到 Bootstrap 4 是移动优先的，我的网站是桌面优先开发的之前，我就开始了转换。无需返回并重新制作整个网站，我想我可以使用此媒体查询添加一些更改：

    @media only screen and (max-width: 767px) {
        /***HOMEPAGE - HEADER***/
        #header {
            height: 45vh;
            background-attachment: inherit;
        }
    }

这些更改未显示在网站上，但当我检查元素并单击源时，我可以看到代码。我的其他查询工作正常，它们看起来像这样：

    @media (min-width: 768px) and (max-width: 991px) {
        /***BODY ***/
        html,
        body,
        a,
        blockquote {
            font-size: 18px;
        }

        /***MAIN & MOBILE NAV***/
        .main-nav {
            display: none;
        }

        #nav-icon3 {
            display: block;
        }
    }

我尝试添加这个元标记：

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

这使得 767 像素下的所有内容看起来都很混乱。

当屏幕小于 767px 时，我只需要进行一些小的调整，并且我不想首先从移动设备重新构建我的网站，此时我也不想转换为 Bootstrap 3。请帮忙！

在 CSS 中使用媒体查询，是否可以从其父元素中删除元素，如下所示：

默认：

<div id="parent">
<div id="child"></div>
</div>

使用媒体查询：

<div id="parent"></div>
<div id="child"></div>

感谢您的任何建议。

我想打印HTML，但我不能够改变的布局和保证金的的Chrome浏览器（参见所附的图像）。

PRINT() {
  window.print();
}

@media print {
  .doNotPrint {
    display: none;
  }
  * {
    -webkit-print-color-adjust: exact;
  }
  @page {
    margin: 0 !important;
    size: A4 Landscape !important;
    -webkit-print-color-adjust: exact;
  }
  html,
  body {
    margin: 0 !important;
    size: A4 Landscape !important;
    -webkit-print-color-adjust: exact;
  }
}

<form [ngClass]="themeSRVC.currentThemeNAME" fxLayout="column" fxFlex>
  <!-- navBAR -->
  <mat-toolbar id="idPrimaryTOOLBAR" color="primary" class="doNotPrint">
    <mat-toolbar-row>
      <button mat-icon-button type="button" (click)="routeSRVC.goBACK()">
        <mat-icon matTooltip="Go Back">arrow_back</mat-icon>
      </button>
      <span class="fillSPACE"></span>
      <button mat-icon-button (click)="PRINT()">
        <mat-icon matTooltip="print">print</mat-icon>
      </button>
    </mat-toolbar-row>
  </mat-toolbar> …

我正在创建 ionic 4 angular 应用程序，并为 iPhone 编写媒体查询。我正在编写 Iphone x 和 Iphone 6、7、8 plus 媒体查询，但 Iphone x 媒体查询也适用于 Iphone x 和 Iphone plus。如何相互区分？下面显示了我正在使用的媒体查询。

 /* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) {}

    /* iphone X */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3){}

我已经为 11" iPad pro 设置了一个 css 媒体查询，但它无法在 iPad 上读取。

我当前的媒体查询是

@media only screen 
and (min-width: 1194px) 
and (max-width: 1194px)
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 2)
{

}

我已经为 12.9" 这样的 css 工作了

@media only screen and (min-width: 1366px) and (max-width: 1366px) and (orientation: landscape) {
}

我还检查了横向 11" 的宽度为 1194px，有人知道仅适用于 ipad pro 11" 的正确 css 媒体查询吗？

https://comcube.ae/index.html

在移动设备上查看时，我在此网站中获得了一个完整的垂直空白区域。（在 Google Chrome 浏览器中）我试过了margin: auto，width: 100%；那种事情......但仍然不正确。问题出在索引页上。任何帮助表示赞赏。谢谢你。