CSS 媒体查询不起作用 [英] CSS Media Query Won't Work

问题描述

我一直尝试在我的 CSS 文档中进行媒体查询，操作如下:

I keep trying to do a media query in my CSS doc doing something like:

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

但是当我在 iPhone 上测试它时它不起作用.我试过改变尺寸并使用纵向/横向功能，但仍然没有.我做错了什么?

but it won't work when I test it on an iPhone. I've tried changing the sizes and using the portrait/landscape feature, but still nothing. What am I doing wrong?

推荐答案

当我在 HTML 的头部链接 CSS 时，我总是调用我的.

I always call mine when I link the CSS in the head of the HTML.

我正在处理的当前页面的示例:

An example from a current page I'm working on:

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />

这将选择从一开始就加载的 CSS 文档，而不是在加载 CSS 文档后选择样式(减少 HTTP 请求的数量)

This selects the CSS doc that will be loaded right from the start instead of selecting styles after the CSS document is loaded (reduces number of HTTP requests)

在 CSS 文档中执行此操作时，通常应将 max-device-width 替换为 max-width.

When doing this within the CSS document itself, you should generally replace max-device-width with max-width.

这篇关于CSS 媒体查询不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！