媒体查询,引导和CSS3-mediaqueries-JS - 是媒体类型(屏幕,手持设备等),可选

2019-09-17 04:01发布

我已经开始(在同一时间少的学习曲线上着手)基于Twitter的引导框架新的自适应网络项目,我已经打了与IE浏览器和媒体查询的问题。 随着IE7和8不支持媒体查询,我抓住的副本CSS3-mediaqueries-JS填充工具脚本,使IE浏览器将开始响应行为。 它没有工作:-(

很多头部划伤后,我缩小了问题,下至媒体查询语法。 引导媒体查询是:

@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) { ... }

现在的问题是,这是正确的,引导或CSS3,mediaqueries.js? W3C规范(http://www.w3.org/TR/css3-mediaqueries/#media0)说,CSS3,mediaqueries.js是正确的,自举是错误的:

媒体查询由一个媒体类型和零个或多个表达式检查的特定媒体功能的条件的。

稍微少权威来源(拉斯弱)表示相反的:

媒体特征可以在没有媒体类型或关键字来使用。 媒体类型被假定为“所有”。 (幻灯片42)

更重要的是,这是在本地支持媒体查询浏览器的行为。

那么,哪些需要修复,引导或CSS-mediaqueries-JS?

Answer 1:

类似的在这里(回答)问题: Twitter的引导320andup实施

我已经抛弃CSS-mediaqueries-JS赞成respond.js这是幸福的,没有媒体类型。

我的问题关于哪种方法是“正确”仍然有效,虽然,虽然这是一个多执行问题上的标准问题。 我估计的媒体类型不被强制就有可能赢得当日的浏览器的方法。 这将意味着CSS3-mediaqueries-JS需要一些更新来处理这个问题。

感谢Christian穆勒,他在此输入。



文章来源: Media queries, bootstrap and css3-mediaqueries-js - is the media type (screen, handheld, etc) optional?