问题标签 [media-queries]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
42557 浏览

iphone - 如何在一个媒体查询中定位 iPhone 3GS 和 iPhone 4?

我也在尝试为 iPad/iPhone 和旧款 iPhone 实现替代布局。

我已经确定最好的方法是使用@mediaCSS3 规范。

因此,这些是我目前的媒体查询:

以上适用于小型台式机和笔记本电脑屏幕。

以上适用于 iPad 和非常小的台式机/笔记本电脑屏幕。

以上是针对 iPhone 3GS 和一般移动设备的。

然而,新的 iPhone 4 配备了史蒂夫乔布斯的全唱全舞“视网膜”显示屏,这意味着它的像素比为 2-1,这意味着 1 像素实际上在浏览器中显示为 2x2 像素,使其分辨率(960x640 - 这意味着它将触发 iPad 布局而不是移动设备布局),因此这需要另一个媒体查询(仅到目前为止 webkit 支持):

现在,问题是……我想要我漂亮的闪亮新 iPhone 4 布局与 iPhone 3GS 和移动设备布局合并,因为它们都将具有完全相同的内部 CSS 代码,

因此提出我的问题;

如何创建@media将 iPhone 4、3GS 和其他手机指向相同样式的规则?

0 投票
1 回答
25769 浏览

jquery - 浏览器调整大小时的 CSS 媒体查询?

我认为 CSS 媒体查询在用户调整浏览器大小时不起作用?用户必须刷新页面才能使媒体查询生效?我如何使用 JS 更新媒体查询?目前我使用 JS 在调整大小添加时检测窗口大小addClass()

0 投票
1 回答
269 浏览

css - css3 mediaqueries - 哪些浏览器需要 js 文件?

嘿伙计们,我正在使用 chrome 浏览,因此被原生 css 媒体查询支持宠坏了。但是我希望所有浏览器都可以使用媒体查询......所以我正在使用

由于这个文件有一个相当大的文件大小,我想知道我是否可以使用条件标签来包含这个文件。

喜欢 …

我是否必须考虑任何其他不支持媒体查询的重要浏览器?移动 android 浏览器等怎么样。我知道 Safari、Firefox 和 Chrome 支持它。

0 投票
2 回答
8057 浏览

css - 如何在 CSS 3 媒体查询中使用 SASS 逻辑

我通过指南针框架和蓝图/网格依赖项使用 saas。我希望能够使用媒体查询设置列的宽度,如下所示:

这编译到 /stylesheets/screen.css 中:

但 screen.css 其余部分的值并未相应设置。我想这是有道理的,因为 $blueprint-grid-width 变量是在编译时读取的,而不是在运行时读取的。

有没有办法通过使用媒体查询来输出具有不同网格宽度的布局来获取屏幕分辨率?

相关github问题:
https ://github.com/chriseppstein/compass/issues/302

0 投票
2 回答
10579 浏览

css - iPhone 的 CSS 媒体查询

我有一个网站将同时显示在桌面和 iPhone 上,使用媒体查询来提供不同的样式表,例如总是加载 reset.css,但如果在桌面上也加载 desktop.css,但如果在 iPhone 上(或者如果用户调整浏览器窗口的大小)加载 iphone.css 而是不再加载 desktop.css,并且还根据用户是否移动了 iPhone 添加了orientation.css 文件。

例如

由于我构建网站的方式,它必须全部在样式表中完成,并且我只想在 HTML 中使用一个 css 文件。

谁能帮我把它修成我想要的。干杯。

0 投票
3 回答
1747 浏览

html - CSS 媒体查询技巧

我正在编写一个使用媒体查询来处理移动版本的网站。是否有可能让主css文件输出这个

然后在手机的 css 文件中输出这个:

是否可以使用媒体查询隐藏文本?

0 投票
2 回答
299 浏览

html - Windows 7 phone Web 开发问题

我开发了一个使用媒体查询来支持移动设备的网站,但 Windows Mobile 7 似乎没有受到影响。我知道 IE 不支持媒体查询,所以我猜它在 WinMob 上是一样的。有没有办法在这个手机上加载不同的页面?

0 投票
5 回答
5055 浏览

javascript - CSS确定活跃的媒体查询

在 Javascript 中是否有直接的方法(不涉及解析 css 代码)来确定哪个媒体查询处于活动状态?

例如我有两个查询:

如果不解析和查看 clientWidth,我如何判断其中哪一个已评估为 true。

0 投票
1 回答
428 浏览

iphone - 媒体查询:避免继承?

晚上好,

我有一个针对桌面体验优化的当前 css 网站。我正在开发 Iphone css,使用 IwebKit5 在旅途中提供更好的用户体验。

我正在使用 javascript,解析用户代理以检测要使用的 css。我正在寻找一种避免使用 javascript 的方法,并发现了媒体查询功能。

这是我尝试过的,它在桌面上运行良好(Iphone css 被忽略),但在 Iphone 上我意识到 mobile.css 和 desktop.css 都已加载,所以我试图找到一种方法来避免这种情况。为了避免这种行为,可以添加什么选项?

谢谢 !

0 投票
5 回答
17942 浏览

php - PHP 版本的 CSS 媒体查询

在网上找不到任何东西,想把问题扔在那里。

是 CSS 媒体查询的 PHP 版本吗?