问题标签 [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 投票
12 回答
255200 浏览

javascript - 在javascript中获取设备宽度

有没有办法使用javascript获取用户设备宽度,而不是视口宽度?

CSS 媒体查询提供了这个,我可以说

如果我以横向定位智能手机,这很有用。例如,在 iOS 上,声明 max-width:640px将针对横向和纵向模式,即使在 iPhone 4 上也是如此。据我所知,Android 并非如此,因此在此实例中使用 device-width 成功地针对两个方向,不针对桌面设备。

但是,如果我正在调用基于设备宽度的 javascript 绑定,我似乎仅限于测试视口宽度,这意味着需要额外的测试,如下所示,

考虑到设备宽度可用于 css 的提示,这对我来说似乎并不优雅。

0 投票
1 回答
215 浏览

css - 是媒体查询事件监听器

css mediaqueries 是某种事件侦听器(侦听窗口调整大小)还是浏览器偶尔检查它们?如果是这封信,什么时候或多久?

0 投票
1 回答
1083 浏览

javascript - Javascript 和媒体查询

我想在下面的 JS 中添加某种媒体查询,以便在移动设备或屏幕 <767px 的高度仅动画到 280px。如果这可以通过 CSS 实现,也会感兴趣

Javascript

非常感谢

0 投票
2 回答
1327 浏览

php - 有什么方法可以用 JS 和 PHP 做“后端媒体查询”?

我正在进行的项目由一个显示内容的网格组成。我想将网格上的每个项目的大小调整为视口大小的四分之一。使用 Javascript 这将非常容易,但是有一些后端需要注意每个项目的大小:

我正在使用 Timthumb 将项目的图像调整为其适当的大小,因此我需要检测视口的宽度,并将适当的值(视口的宽度 / 4)发送到为每个项目提供服务的 php,因此它告诉 Timthumb使用合适的尺寸。

解决这个问题的最佳方法是什么?

0 投票
2 回答
1050 浏览

html - 如何在不添加/删除/编辑设计和 CSS 的情况下为纵向和横向模式进行响应式设计?

我正在为桌面和 iPad 设计一个网站。同一网站将用于 iPad 和台式电脑。

网站的设计宽度为 1024 像素,在 iPad 纵向模式下为 768 像素。我的问题是在进行设计和编写 CSS 时应该考虑什么,因此不需要为肖像模式编写特定的 css

我想在不使用媒体查询的情况下为两个方向进行灵活的布局。

0 投票
1 回答
644 浏览

javascript - 媒体查询的 IE 问题

好的,这个脚本使用 css 媒体查询检查媒体类型。这个想法是我创建了一个 div(前 DOM)和一个带有媒体查询的样式元素,如果应用了样式,那么媒体查询是真的。这适用于 Firefox 5,但不适用于 IE 9。

这在 FF 5 和 Chrome 控制台中返回“5 1”,但在 IE 9 中返回“919 0”。IE 在这里做什么?我该如何解决?

这是函数调用的示例: mediaQuery('screen and (min-width: 480px)').match

经过一些测试,我发现宽度与屏幕宽度的 100% 匹配。为什么媒体查询在 IE 中不起作用,它在 FF 和 Chrome 中起作用……也许 IE 只是在我在 javascript 中测试宽度之前没有处理 CSS?

0 投票
4 回答
16450 浏览

css - CSS 媒体查询在 IE 9 中不起作用

我在设计中包含了一些媒体查询,以根据浏览器的宽度更改页面某些元素的宽度。查询如下所示:

Chrome、Safari 和 Firefox 运行良好,只有 IE 是个问题。我知道 IE 9 之前的所有版本都不支持此功能,但它们在 IE 9 中根本不起作用。可能是什么问题?

0 投票
1 回答
1114 浏览

css - 纯 CSS 中的模块化高度 div(100px 的倍数)

我有一个重复背景的 div。背景图像为 50 像素 x 50 像素。

因为重复图像的高度为 50px,所以我希望 div 的高度为MULTIPLES OF 50。这将确保背景图像是重复的,但不会被 div 的边缘截断。

  1. 有没有一种纯 CSS 方法可以在没有媒体查询的情况下做到这一点?
  2. 有没有办法通过媒体查询来做到这一点?
  3. 我知道使用 JavaScript 是可能的,但我宁愿不必使用它(有很多具有这种样式的对象,并且宁愿不必$.each()全部使用)。
0 投票
2 回答
363 浏览

css - 如何修复我的网站在不同尺寸和分辨率的屏幕上的显示方式?

您可以在http://www.taramenconi.byethost11.com/上查看我的网站。我为 1024 x 768 设计了它。我还注意到,在某些屏幕上,它看起来只是被拉伸了很多......我特意创建了背景来填充更大的浏览器,但我希望内容区域保持相同的大小。我该如何解决?

这是我的CSS:

0 投票
1 回答
536 浏览

iphone - CSS中的width和device-width有什么区别?

widthCSS和CSS有什么区别device-width

我知道已经有一些关于这个的问题,但我想从媒体查询的角度来理解这些,以嗅探浏览器/设备,例如桌面/移动/平板电脑。