问题标签 [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.
javascript - 在javascript中获取设备宽度
有没有办法使用javascript获取用户设备宽度,而不是视口宽度?
CSS 媒体查询提供了这个,我可以说
和
如果我以横向定位智能手机,这很有用。例如,在 iOS 上,声明 max-width:640px
将针对横向和纵向模式,即使在 iPhone 4 上也是如此。据我所知,Android 并非如此,因此在此实例中使用 device-width 成功地针对两个方向,不针对桌面设备。
但是,如果我正在调用基于设备宽度的 javascript 绑定,我似乎仅限于测试视口宽度,这意味着需要额外的测试,如下所示,
考虑到设备宽度可用于 css 的提示,这对我来说似乎并不优雅。
css - 是媒体查询事件监听器
css mediaqueries 是某种事件侦听器(侦听窗口调整大小)还是浏览器偶尔检查它们?如果是这封信,什么时候或多久?
javascript - Javascript 和媒体查询
我想在下面的 JS 中添加某种媒体查询,以便在移动设备或屏幕 <767px 的高度仅动画到 280px。如果这可以通过 CSS 实现,也会感兴趣
Javascript
非常感谢
php - 有什么方法可以用 JS 和 PHP 做“后端媒体查询”?
我正在进行的项目由一个显示内容的网格组成。我想将网格上的每个项目的大小调整为视口大小的四分之一。使用 Javascript 这将非常容易,但是有一些后端需要注意每个项目的大小:
我正在使用 Timthumb 将项目的图像调整为其适当的大小,因此我需要检测视口的宽度,并将适当的值(视口的宽度 / 4)发送到为每个项目提供服务的 php,因此它告诉 Timthumb使用合适的尺寸。
解决这个问题的最佳方法是什么?
html - 如何在不添加/删除/编辑设计和 CSS 的情况下为纵向和横向模式进行响应式设计?
我正在为桌面和 iPad 设计一个网站。同一网站将用于 iPad 和台式电脑。
网站的设计宽度为 1024 像素,在 iPad 纵向模式下为 768 像素。我的问题是在进行设计和编写 CSS 时应该考虑什么,因此不需要为肖像模式编写特定的 css
我想在不使用媒体查询的情况下为两个方向进行灵活的布局。
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?
css - CSS 媒体查询在 IE 9 中不起作用
我在设计中包含了一些媒体查询,以根据浏览器的宽度更改页面某些元素的宽度。查询如下所示:
Chrome、Safari 和 Firefox 运行良好,只有 IE 是个问题。我知道 IE 9 之前的所有版本都不支持此功能,但它们在 IE 9 中根本不起作用。可能是什么问题?
css - 纯 CSS 中的模块化高度 div(100px 的倍数)
我有一个重复背景的 div。背景图像为 50 像素 x 50 像素。
因为重复图像的高度为 50px,所以我希望 div 的高度为MULTIPLES OF 50。这将确保背景图像是重复的,但不会被 div 的边缘截断。
- 有没有一种纯 CSS 方法可以在没有媒体查询的情况下做到这一点?
- 有没有办法通过媒体查询来做到这一点?
- 我知道使用 JavaScript 是可能的,但我宁愿不必使用它(有很多具有这种样式的对象,并且宁愿不必
$.each()
全部使用)。
css - 如何修复我的网站在不同尺寸和分辨率的屏幕上的显示方式?
您可以在http://www.taramenconi.byethost11.com/上查看我的网站。我为 1024 x 768 设计了它。我还注意到,在某些屏幕上,它看起来只是被拉伸了很多......我特意创建了背景来填充更大的浏览器,但我希望内容区域保持相同的大小。我该如何解决?
这是我的CSS:
iphone - CSS中的width和device-width有什么区别?
width
CSS和CSS有什么区别device-width
?
我知道已经有一些关于这个的问题,但我想从媒体查询的角度来理解这些,以嗅探浏览器/设备,例如桌面/移动/平板电脑。