标签: media-queries

使用媒体查询构建百分比宽度网站的一个非常好的功能是,当您放大时,该网站将始终是视口的100%,即使在缩放时也会尊重媒体查询.

有关完整的CSS文件,请参阅http://pastebin.com/ige96Czv(它实际上是.less文件)

和https://s140452.gridserver.com/locations/

对于测试站点.

我在上面描述的缩放效果在Firefox和Safari中效果很好,但在Chrome上,媒体查询不会在缩放时注册.

有谁知道为什么？这是Chrome错误,还是我的代码有问题？

我已经开始了一个基于twitter的bootstrap框架的新的响应式Web项目(同时开始了LESS学习曲线)并且我遇到了IE和媒体查询的问题.由于IE7和8不支持媒体查询,我抓取了css3-mediaqueries-js polyfill脚本的副本,以便IE开始响应.它不起作用:-(

经过大量的讨论后,我将问题缩小到了媒体查询语法.Bootstrap的媒体查询是:

@media (max-width: 480px) { ... }                         // Landscape phones and down
@media (max-width: 767px) { ... }                         // Landscape phone to portrait tablet
@media (min-width: 768px) and (max-width: 979px) { ... }  // Portrait tablet to landscape and desktop
@media (min-width: 1200px) { ... }                        // Large desktop

事实证明,css3-mediaqueries-js无法正确解析这些内容,因为脚本期望@media在(...)表达式和表达式之间存在媒体类型 - 屏幕,掌上电脑,所有等等,例如:

@media all and (max-width: 480px) { ... }

问题是,哪个是正确的,bootstrap或css3-mediaqueries.js？W3C规范(http://www.w3.org/TR/css3-mediaqueries/#media0)说css3-mediaqueries.js是正确的,并且bootstrap是错误的:

媒体查询由媒体类型和零个或多个表达式组成,用于检查特定媒体功能的条件.

一个稍微不那么权威的消息来源(Russ Weakly)反过来说:

可以在没有媒体类型或关键字的情况下使用媒体功能.媒体类型被假定为"全部".(幻灯片42)

更重要的是,这就是本机支持媒体查询的浏览器的行为方式.

那么哪个需要修复,引导或css-mediaqueries-js？

我的公司正在使用print.css进行打印.另外,我们有另一个style.css覆盖任何其他.css文件,包括print.css.出于某种原因,当来自html5样板(位于覆盖文件中)的@media打印查询打开时,IE8和IE9正在打印空白页.当它被注释掉时,没有问题.这是什么问题？我们想留下来自样板的@media打印.

PRINT.CSS

@media print
{
body *
{
    visibility:hidden;
}

#basicShell #main,
#basicShell #main *,
.basicShell_container .content,
.basicShell_container .content *,
#mainShell_container .center_columnContent,
#mainShell_container .center_columnContent *
{
    visibility:visible;
}

#basicShell #main,
.basicShell_container .content,
#mainShell_container .center_columnContent
{
    position:absolute;
    left:0;
    top:0;
}
}

STYLE.CSS(覆盖一切)

@media print {
* { background: transparent !important; color: black !important; text-shadow: none    
!important; filter:none !important; -ms-filter: none !important; float: none 
!important;} /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" …

好的,所以我使用Respond.js将polyfill用于旧版浏览器上的媒体查询(ie8是最重要的).

与此同时,我正在研究使用Enquire.js,它可以根据媒体查询匹配执行js-code.

孤立地测试这个东西有效:

• respond.js为IE8正确执行css中定义的媒体查询
• enquire.js根据匹配css的媒体查询正确执行javascript代码.(适用于非传统浏览器)

然而,组合似乎不起作用.即:

Enquire.js不会根据通过respond.js启用的媒体查询执行javascript(对于旧版浏览器)

由于Respond.js包含Paul Irish的MatchMedia的polyfill(根据:Inquire的文档)应该足以支持遗产,我不确定会出现什么问题.

所以只是要检查:这个组合应该正常吗？

我目前正在我的WordPress博客中实现CSS媒体查询,我想知道是否有任何已知方法如何调整宽度为400-600px的博客图像以适应iTouch,iPhone和屏幕分辨率其他有小屏幕的智能手机.

我的想法是添加这个CSS:

.blogpost img {
    width:55%;
    height:55%;
}

这样它会自动调整我博客中的所有图像.我需要帮助解决这个问题.我不满足于我的方法,因为我听说它会扭曲图像.有专业意见吗？

理想情况下,我想这样做:

@w: 4px;

@media (max-width:900px) {
    @r: 3px; 
}
@media (min-width:900px) {
    @r: 5px; 
}

.myclass {
    border-radius: @w + @r;
}

这不会编译,因为@r没有在我定义的范围中定义.myclass.显而易见的解决方案是.myclass在@mediablocs 内定义或者在定义中复制@media查询.myclass.

但是,一旦你@r在许多课程中使用,这两个解决方案都很混乱,并涉及许多重复.

有干净的干燥溶液吗？

我已经完成了一个网站,它现在在浏览器中运行良好.我被要求使其兼容Android,iPhone,iPad,平板电脑和网络等.我正在使用bootstrap asp.net.

现在我正在努力,找不到任何答案.我正在使用这些内联媒体查询

@media screen and (min-width:0px) and (max-width:320px){/*Any css will be defined here*/}
@media screen and (min-width:321px) and (max-width:480px){/*Any css will be defined here*/}
@media screen and (min-width:481px) and (max-width:540px){/*Any css will be defined here*/}
@media screen and (min-width:541px) and (max-width:775px){/*Any css will be defined here*/}
@media screen and  (min-width:768px) and (max-width:783px){/*Any css will be defined here*/}
@media screen and (min-width:776px) and (max-width:1536px){/*Any css will be defined here*/}
@media screen and (min-width:1537px){/*Any css will be defined here*/}

但在某些iPad中,CSS并未应用.现在我的问题是,@ media的标准分辨率和方向是什么,它将覆盖所有(Android,iPhone,平板电脑和Web等)CSS？

我需要检查一些特定于iphone 7和7 plus的附加CSS,iphone 6和iphone 7是否具有相同的物理高度/宽度？如果可能,请提及媒体查询.

我想为平板电脑设备设置一些CSS规则，为此，我尝试为769px至991px之间的屏幕设置这些规则。当我做 ：

@media (min-width: 769px) and (max-width: 991px) {
    .img-circle {
        width: 50%;
    }
}

它适用于chrome，但是firefox无法使用，当我尝试添加括号时：

@media ((min-width: 769px) and (max-width: 991px)) {
    .img-circle {
        width: 50%;
    }
}

它适用于forefox，但不适用于chrome！如果您有一个主意:)我不知道

问候

我有一个侧边栏，当使用移动设备在侧边栏上滚动时，我只希望滚动而不是悬停。根据我之前看到的答案，我采用了这种方法（仅CSS解决方案！）：

  /* default hover class on list items*/
  ul li:hover .check {
  border: 4px solid #FFFFFF;
}

/* default hover class on list items when checked*/
ul li:hover .check {
border: 4px solid #FFFFFF;
}


/* for mobile, set hover-color on list items to be same as un-hovered list items --THIS IS WORKING*/
@media all and (min-width:320px) and (max-width: 960px) {
    ul li:hover label {
    color: #AAAAAA;
    background: transparent;
  }
}

/* for mobile, set hover-color on checkmark items to …