标签: media-queries

(它适用于其他浏览器,但不适用于chrome)

我想仅在浏览器大小小于1400px时应用样式

与max-width不工作

@media only screen and (max-width:1400px)  {
.heading-left {
    left: -0.5%;
  }
}

与min-width它的工作

@media only screen and (min-width:480px)  {
.heading-left {
    left: -0.5%;
   }
}

但是当浏览器宽度超过1400px时也会改变(我知道它是如何工作但最大宽度不起作用)

小提琴这个

https://jsfiddle.net/j4Laddtk/

用于定位Apple 2018设备的正确CSS媒体查询是什么:iPhone XR/XS/XS Max？

我每天使用一个页面,使用我不喜欢的CSS媒体查询; 我宁愿使用整页(大多数都与Twitter Bootstrap菜单相关,当比768px窄时).

有没有办法用CSS覆盖Bootstrap的媒体查询？最好不要定义我自己的媒体查询来单独覆盖所有规则,因为我觉得这需要很长时间.

编辑:我没有源代码的控制权,否则我只是杀死引导响应代码.

我正在调整一个网页,以便它在智能手机上看起来不错.我在CSS文件中声明了@media部分,因此我可以指定此页面的字体大小.这是媒体部分:

@media screen and (max-device-width: 640px) {
    #TermsOfUse {
        padding: 0 2em 0 2em;
        margin-left: auto;
        margin-right: auto;
        color: #777;
        font: small sans-serif;
    }

    #TermsOfUse p {
        color: #777;
        font-weight: bold;
        font: small sans-serif;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    #TermsOfUse #trademark_footer p {
        font: xx-large sans-serif;
    }
}

但是,字体大小显示不一致.我已经告诉它显示字体"小",但是一个部分继续以更小的尺寸显示字体(id ="trademark_footer"在底部).使用"xx-large"甚至不会使字体与页面其余部分中的"小"字体一样大.我正在Android上的Chrome中查看该页面.

此外,当我在以下模拟器中查看此页面时,整个页面上的所有字体都很小 - 太小而无法读取.

http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy

首先,为什么页面底部的商标字体显示比页面其他部分的字体小得多(Android上的Chrome)？

其次,为什么在iPhone模拟器中所有字体都显得如此之小？

我所要做的就是在所有智能手机上以清晰易读的尺寸显示所有字体.

更新:

当我明确指定字体大小时,我遇到了同样的问题.例如,如果我为主要字体指定13px,我必须在商标上指定大约30px的内容,以使其显示为相似的大小.

如果我使用"em",同样的事情.

更新:

我只是在我的三星Galaxy S2上的默认(我认为)浏览器中进行了测试,它显示了很小的字体,太小了,它难以辨认.顺便说一下,在默认的Adroid浏览器中,我可以双击,它会扩展到一个不错的大小.

试过这个并没有什么区别:

body {
    -webkit-text-size-adjust: none;
}

我想指定两种稍微不同的背景颜色,一种用于Mac OS,一种用于Windows.

我试图隐藏媒体查询不被打印,所以我想出了@media not print and (min-width:732px).但无论出于何种原因,这个(以及我尝试过的许多变化)并没有像我期望的那样在浏览器中显示.

我能想到的唯一选择是使用@media screen and (max-width:732px),但我想避免这种情况,因为它排除了屏幕以外的所有其他媒体类型.

我从Chrome ADB插件中获取此信息,通过USB连接到我的手机.基本上允许我检查我的android chrome上的元素,并在我连接的PC上查看或更改它们.

我遇到了这个奇怪的问题.我认为媒体查询会否决泛型类规则,但如果您看到此图像,则可以看到媒体查询规则被覆盖.我可以通过添加来解决这个问题!important但我宁愿不这样做,我也意识到非媒体查询容器h1的规则是在媒体查询规则之后声明的.我不确定这是为什么,或者是否还有其他原因.任何人都可以解释为什么会这样吗？

CSS代码:

@media screen and (max-device-width: 767px) {
  .container > h1 {
    font-size: 40px;
    line-height: 40px; }
    ...some more rules... }
.container > h1 {
    margin: 0;
    font-size: 80px;
    font-weight: 300;
    line-height: 80px; }

编辑 - 添加示例

请参阅:http ://jsfiddle.net/djuKS/ 请注意,如果您交换规则顺序,则行为符合预期.但默认情况下,媒体查询被覆盖

我有一台谷歌Nexus 7平板电脑用于测试一些响应式设计.在Javascript中,screen.width返回为800px,如预期的那样(原始分辨率).

当屏幕的最大宽度> 720px时,平板电脑如何选择以下媒体查询？

@media only screen and (max-width: 720px) and (orientation: portrait) {
    .test{ background: red;}
}

有没有办法通过媒体查询检测垂直滚动距离？

似乎媒体查询是围绕检测媒体而设计的(令人震惊的权利:P)所以浏览器高度之类的东西是可测试的,但不具体到页面滚动的距离.

如果不可能,但你知道JS(不是jQuery)的方式随意发布!

当bootstrap-responsive.css媒体查询付诸实施时,这是最快速,最简单的方法吗？

go in action =当您将窗口调整为移动宽度并将网站更改为响应式移动时

希望问题很清楚