标签: media-queries

我想知道CSS是否可以"重",例如从浏览器中使用大量的解析时间.

例如,我使用带有许多特定选择器的CSS表

:last-child, 
:nth-child(n) 
table.sortable thead tr th:not(.table-th-nosort):hover

是否可以显着影响性能？

使用媒体查询也是如此.我想使用CSS3媒体查询为移动设备设置一个站点:

@media screen and (max-width: 600px) {
   #sidebar {
      display: none;
      // etc
   }
}

目前我的主文件中有大约600行CSS(未缩小),而某些特定页面包含额外的CSS文件(10-300行之间).

使用媒体查询将大大增加我期望的.这会对性能产生影响吗？

我正在尝试在网站中应用媒体查询,但我的知识并不深入本主题,所以基本上我想在检测到的屏幕大于1024*768时将特定样式应用于标记.

我这样做了

@media screen and ( device-width: 1024px ) {

}

但我要确定何时分辨率大于1024

使用JavaScript,输出包含应用于当前页面的所有媒体查询的列表的最佳方法是什么.

我假设这需要过滤以找到嵌入式媒体查询,即

<link rel="stylesheet" media="only screen and (min-width: 30em)" href="/css/30em.css">

以及位于CSS文件中的媒体查询,即

@media only screen and (min-width: 320px) {}

我正在寻找的一个示例输出:

<p>There are 3 media queries loaded on this page</p>
<ol>
    <li>30em</li>
    <li>40em</li>
    <li>960px</li>
</ol>

我试图找出如何根据当前的设备/媒体查询选择运行一个javascript块.我正在使用Twitter Bootstrap,基本上有两个版本的媒体查询:

@media (min-width: 980px) { ... } <!-- Desktops -->
@media (max-width: 979px) { ... } <!-- Smaller screens/tablets/phones -->

我有一个我生成的地图,但我没有在移动/小屏幕版本中显示它和宽带原因.然而,即使您无法在移动屏幕上看到它,javascript仍会在后台执行.所以,我试图在javascript中找到一种方法,我可以做以下事情:

// Imaginary function
var screenType = getScreenType();

if(screenType == 1) {
   // Load map
}

我已经读过人们在他们的媒体查询中将CSS属性设置为特定值,然后尝试根据CSS属性在DOM中找到该元素,但必须有更好的方法.有任何想法吗？

在CSS中使用rem作为单位时,缩放在Safari(PC和Mac)中都不起作用.

示例位于http://jsfiddle.net/L25Pz/3/

标记:

<div>
    <img src="http://www.google.com/images/srpr/logo3w.png" />
    <p>Lorem ipsum dolor sit amet</p>
</div>

CSS:

html { font-size:62.5% }

div { background:url(http://www.google.com/images/srpr/logo3w.png); background-size:275px 95px; background-size:27.5rem 9.5rem; background-repeat:no-repeat; }
img { width:27.5rem; height:9.5rem; }
p { font-size:5rem; }

@media only screen and (max-width: 500px) {
    html { font-size:50%;} /* should render everything * 0.8 */
}

...当浏览器窗口宽度超过600px时,在所有浏览器中呈现大小为275px*95px的图像.此外,在触发媒体查询时,图像和背景将其宽度和高度调整为220px*76px.

但是 - 使用Safari,宽度和高度设置为247px*75px.哪个不是*0.8,这是别的......

另一方面,段落的字体大小正确呈现:挂钩在查询上时为40px.

如果你问我,我会觉得很奇怪.有人有解决方案吗？

我有下一个CSS代码:

#mgheader .letters {
  display: inline-block;
  margin-left: 55px;
  margin-top: -45px;
  position: absolute;
}

#mgheader .letters {
  display: inline-block;
  margin-left: 10px;
  position: absolute;
}

现在我想在Google Chrome和Safari中执行第一个,在其他浏览器中执行第二个.

我试过这个,但第二个代码似乎总是在执行:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #mgheader .letters {
    display: inline-block;
    margin-left: 55px;
    margin-top: -45px;
    position: absolute;
  }
}   

#mgheader .letters {
  display: inline-block;
  margin-left: 10px;
  position: absolute;
}

我该如何解决这个问题？

我真的不知道该如何处理这个事,我在安卓4.1.1的Galaxy Tab 2 7英寸平板电脑,并使用Chrome作为浏览器(v26.0.1410.58).我正在以纵向模式加载Web应用程序并且媒体查询匹配得很好,我将其切换到横向模式,一切都运行良好,但当我将其切换回纵向模式时,浏览器只是不应用任何样式在所有,调试与连接到PC的平板电脑的USB应用程序,我可以看到Chrome未找到任何媒体查询匹配了.

我正在申请的媒体查询是:

(设备宽度:600px)和(最大设备高度:1024px)和(最大宽度:600px)和(最小设备高度:976px)和(方向:纵向)

如果我在浏览器之前和之后检查设备的宽度和高度,它们根本不会改变.

一些可能有用的数据:

screen.width:600

screen.height:976

$(window).width():600

它只发生在这个设备上,我需要在此选项卡中支持该应用程序.

使用媒体查询检测视网膜显示并指定的最佳方法是什么max-width？我可以使用检测视网膜

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

}

如何将其添加到媒体查询？我写的吗？

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
 @media …

doSomethingFunc当afterPrint发生时,我需要执行.我的代码在所有浏览器上都运行良好,除了当前的Safari-Versions(OSX上的Safari 10.1和iOS 10.3中的Safari浏览器).似乎没有为这两个浏览器调用事件监听器(至少用于打印).

const mediaQueryPrint = window.matchMedia('print');
mediaQueryPrint.addListener((mql) => {
    if (!mql.matches) {
        setImmediate(doSomethingFunc);
    }
});

window.print();

上面的代码与iOS 10.2的OSX Safari 9.1.2和Safari完美配合.但不是当前的版本.

有人注意到类似的东西吗？或者我是否必须改进当前Safari版本的代码？

我的猜测是,这是一个Safari bug,因为Safari 10.1 changelog章节的可访问性中有相应的注释.

在隐身模式下使用谷歌浏览器进行测试,每次都使用"空缓存和硬重新加载"重新加载页面.

我有以下html响应图像:

<img class="content-img" src="/app/uploads/2018/07/1400x750.png" 

srcset="/app/uploads/2018/07/1400x750.png 1400w, 
        /app/uploads/2018/07/1400x750-768x411.png 768w, 
        /app/uploads/2018/07/1400x750-1280x686.png 1280w, 
        /app/uploads/2018/07/1400x750-520x279.png 520w, 
        /app/uploads/2018/07/1400x750-420x225.png 420w, 
        /app/uploads/2018/07/1400x750-340x182.png 340w, 
        /app/uploads/2018/07/1400x750-600x321.png 600w" 

sizes="(max-width: 666px) 100vw, (max-width: 1399px) 38vw, 535px" 
>

预期行为:

1.视口宽度0px - 666px:

• 浏览器应采用完整的视口像素宽度,例如450px,并从srcset中选择宽度大于450px的最小src,在本例中为'/app/uploads/2018/07/1400x750-520x279.png'

2.视口宽度667像素 - 1399像素:

• 浏览器应占视口宽度的38%,例如380px @ 1000px视口,并从宽度大于380px的srcset中选择最小的src,在本例中为'/app/uploads/2018/07/1400x750-420x225.png'

3.视口宽度1400+ px:

• 浏览器应采用默认值535px并从宽度大于535px的srcset中选择最小的src,在本例中为'/app/uploads/2018/07/1400x750-600x321.png'

实际行为:

在Google Chrome中进行测试,使用开发工具检查img上的所有上述示例中的元素,在每种情况下生成的"CurrentSrc"是:

1. /app/uploads/2018/07/1400x750-520x279.png (正确)

2. /app/uploads/2018/07/1400x750-1280x686.png (INCORRECT(预期宽度为420px)

3. /app/uploads/2018/07/1400x750.png (INCORRECT(期望600px宽度)

我一直在挠头,其他类似的问题似乎都归结为谷歌Chrome缓存问题,但我在测试时已经小心消除了这个问题,但我仍然没有得到我期望的src图像.

我只有90%确定我已经为我想要的行为编写了正确的"尺寸"属性.请注意,由于排列了响应式CSS断点并尝试在上下文中加载合理的图像宽度,因此逻辑稍微复杂一些.