为什么我的CSS3媒体查询不起作用? [英] Why are my CSS3 media queries not working?
本文介绍了为什么我的CSS3媒体查询不起作用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在styles.css中,我使用的是媒体查询,两者均使用以下形式:
In the styles.css, I am using media queries, both of which use a variation of:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
当我缩小窗口时,这些站点会调整为我想要的常规浏览器(Safari,Firefox)中的布局,但是,手机上的移动布局根本没有显示.相反,我只看到默认的CSS.
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?
推荐答案
所有这三个都是有用的提示,但看来我需要添加一个元标记:
All three of these were helpful tips, but it looks like I needed to add a meta tag:
<meta content="width=device-width, initial-scale=1" name="viewport" />
现在看来它可以同时在Android(2.2)和iPhone上使用...
Now it seems to work in both Android (2.2) and iPhone all right...
这篇关于为什么我的CSS3媒体查询不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文