当前位置: 首页 > 面试题库 >

媒体查询-移动与桌面浏览器

卜方伟
2023-03-14
问题内容

我已经看到许多网站都可以在桌面浏览器和手机浏览器上做出响应,我正在一个网站上工作,并且设置了以下样式表: )

/* Normal styles go here */

@media screen and (min-device-width:321px)
{
    /* Styles */
}
@media screen and (min-width:701px)
{
    /* Styles */
}
@media screen and (min-width:1025px)
{
    /* Styles */
}
@media screen and (min-width:2049px)
{
    /* Styles */
}

但是,我上面的样式表似乎只能在桌面浏览器上工作。(已使用Android Firefox和Sony Xperia
Ray上的默认Android浏览器进行了测试)

希克斯(Hicks)设计html" target="_blank">网站的规则与我的非常相似,但是它们使用了最小值和最大值,但对我来说似乎都不适用于移动和桌面浏览器。(我计划进一步优化媒体查询,我只是想让这些基本功能按我现在的意愿运行)。

如果我使用max-device-width而不是max-width,它将在移动浏览器而不是台式机浏览器上响应…

我尝试了以下解决此问题的方法:

@media screen and (max-width:480px), screen and (max-device-width:480px)
{
    /* Styles */
}

也:

@media screen and (max-width:480px), and (max-device-width:480px)
{
    /* Styles */
}

但是,我不认为这两种方法都是正确的,因为Firefox的Web开发人员工具栏对此有所抱怨。我还尝试了上述规则的一些变体,但仍然无法正常工作。

据我了解,max-width读取视口宽度(例如,浏览器窗口的宽度),而max-device-
width读取您用于查看站点的屏幕的实际宽度。-我感到困惑,为什么max-width似乎无法读取移动设备的浏览器宽度。

我想我可能在这里缺少有关媒体查询的明显信息……如果我想让我的网站在台式机和移动浏览器上响应,那么我必须复制所有媒体查询并进行更改,这似乎没有任何意义。从“屏幕和(最大宽度)”到“屏幕和(最大设备宽度)”的查询,反之亦然。(我很to愧在这里输入作为解决方法)

如何合并(max-width)和(max-device-width)规则,或者如何实现?

如果您不想阅读以上所有内容:

我正在使用@media屏幕和(max-width:480px),但是似乎只有@media屏幕和(max-device-
width:480px)可在手机上使用。如何结合这两个规则在移动和桌面浏览器上实现响应式设计?


问题答案:

那里有很多媒体,如果只想按其属性进行选择,请使用all关键字:

@media all and (max-width:480px)
{
    /* Styles */
}

编辑

将规则与或结合:

@media all and (prop1:val1), all and (prop2:val2)
{
    /* Styles */
}

将规则与和结合使用:

@media all and (prop1:val1) and (prop2:val2)
{
    /* Styles */
}


 类似资料:
  • 问题内容: 我是使用CSS3媒体查询的自适应设计的新手。我清楚地了解我们如何使用这些媒体查询来定位不同的设备,但令我感到困惑的地方是浏览器缩放!! 例如 :这是我正常的身体CSS规则 当我想更改此css规则以定位宽度在150px至600px范围内的设备时,我添加了此特定的媒体查询。 问题 :我使用的是Google Chrome浏览器,当我放大到200%左右时,此特定的媒体查询就会起作用。 我如何知

  • 问题内容: 在我的PHP页面中,根据页面是在移动浏览器还是桌面浏览器下运行,我应该显示两种不同的文本内容。有没有办法在PHP中执行此控件? 问题答案: 这里有一个非常好的PHP库,用于检测移动客户端使用它,仅显示移动内容非常容易:

  • 在ReactJS中,是否有一种方法可以确定网站是在移动端还是桌面端被浏览?因为,根据我想要呈现的设备不同。 谢谢

  • 如何使用普通的javascript、纯HTML和CSS来检测不依赖屏幕分辨率的移动设备?

  • 主要内容:1. 媒体类型,2. 媒体特性,3. 逻辑操作符,4. 定义媒体查询随着移动设备的快速普及,用户不再只是通过传统的电脑系来浏览 Web 内容,越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容,为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。 媒体查询是 CSS 样式表最重要的功能之一,所谓媒体查询指的就是根据不同的媒体类型(设备类型)和条件来区分各种设备(例如:电脑、手机、平板电脑、盲文设备等),并为它们分别定义不

  • 响应式网站设计只有弹性布局这一个技巧是不够用的,媒体查询( media queries )也是响应式设计的核心技巧之一。媒体查询是可应用于 CSS 样式的简单过滤器。有了这些过滤器,我们可以根据设备呈现内容的特点轻松更改样式,包括显示屏类型、宽度、高度、方向甚至是分辨率。 在 CSS2.1 中定义了媒体类型,通过给 元素添加 media 属性,可以为不同的媒体类型加载不同的样式表。 <link r