CSS3媒体查询不工作 [英] CSS3 media queries not working

问题描述

我在以下网站上使用CSS媒体查询：

[删除的网站链接]

styles.css都使用以下变体：

  / *  -  [常规CSS样式] ------ ---------------------------- * / 
 
 @media only screen and（max-width：767px） {
 
 / *  -  [移动风格在这里] ------------------------------- * / 
} 
  

网站在常规浏览器中调整为我想要的布局，Firefox）当我缩小窗口，但是，手机布局根本没有显示在手机上。

我只是看到默认的css。

任何人都能指向正确的方向？我已经在线查看教程和模板来实现这些查询，但我感觉我缺少一些基本的东西，以使这项工作...

解决方案

这三个都是有用的提示，但它看起来像我需要添加一个元标记：

  < meta name =viewportcontent =width = device-width/> 
  

现在它似乎适用于Android >

I am using CSS media queries on the following sites:

[deleted site links]

In the styles.css, both use a variation of:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

/*--[ Mobile styles go here]-------------------------------*/
}

The sites resize to the layout I want in a regular browser (Safari, Firefox) when I shrink the window, however, the mobile layout isn't shown at all on a phone.

Instead I just see the default css.

Can anyone point me in the right direction? I've been viewing tutorials and templates online to implement these queries but I sense that I am missing something fundamental in order to make this work...

解决方案

All three of these were helpful tips, but it looks like I needed to add a meta tag:

<meta name="viewport" content="width=device-width" />

Now it seems to work in both Android (2.2) and iPhone all right...

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