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 ，最大宽度为。

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

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