标签: media-queries

我在我的设计中包含了一些媒体查询,以根据浏览器的宽度更改页面某些元素的宽度.查询看起来像这样:

@media screen and (min-width:1024px)
@media screen and (max-width:1024px)

Chrome,Safari和Firefox工作得很好,只有IE才有问题.我知道IE 9之前的所有版本都不支持此功能,但它们根本不适用于IE 9.可能是什么问题？

如果窗口大小低于500px,我想加载不同的css文件.我有

<link type="text/css" media='(max-width: 500px)' rel="stylesheet" href="/static/mobile.css" />
<link type="text/css" media='(min-width: 500px)' rel='stylesheet' href='/static/main.css' />

但是main.css总是覆盖mobile.css,尽管窗口小于500px.怎么了？

编辑:我把它改成了

<link type="text/css" rel="stylesheet" href="/static/main.css" />
<link type="text/css" media="(max-width: 500px)" rel="stylesheet" href="/static/mobile.css" />

但是当我将窗口缩小到小于500px时,元素检查器会显示正在加载mobile.css,但是每个元素都被main.css中的规范覆盖.

我使用以下媒体查询在全屏模式下应用我的CSS覆盖:

@media (device-width: 100vw) and (device-height: 100vh) {
  .content {
    padding: 0px !important;
  }
}

在Firefox中完美运行但在Chrome中非常不可靠(在Windows 7 x64上都是最新版本).我可以尝试仅在不是全屏模式时应用我的覆盖,但需要反转查询.所以我的问题是:

1. Chrome应该支持查询吗？
2. 我如何否定它(逻辑上没有)？

PS

我viewport的声明是这样的:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

:-moz-system-metric(启用触摸)看起来像一个非常有用的CSS选择器,用于在移动网站上工作.

不幸的是,Webkit在移动触摸设备上占据主导地位,所以有人知道是否有Webkit等价物吗？

(理想情况下,如果这是由CSS3媒体查询管理的话会很好)

编辑: 看起来Gecko支持它作为媒体查询

是否可以将OSX窗口的最小宽度设置为320px？

Safari中的默认最小宽度大于此值,这使得难以使用媒体查询进行编程并在OSX上进行复制.请看我的截图,这将使事情更清晰.

顺便说一句,如果你要发布技术答案(我假设有人会),请记住我没有后端代码的经验,我知道最多的是CSS/PHP/JS.我不介意弄脏手,但说明需要冗长:-)

我正在使用媒体查询构建响应式网站.我需要为非常小的屏幕切换到不同的导航方法.

对于桌面/平板电脑屏幕,我使用基于精灵的UL/LI列表方法.对于小型智能手机屏幕,我会有简单的链接文字.

如果我使用,显示:无; 要隐藏智能手机的基于精灵的导航,精灵图像是否仍会被加载,但是没有显示？我是否需要解析智能手机的css媒体查询中的图像参考？或者我应该将图像引用完全从初始css中删除,因为我从小到大设计(即默认css用于小屏幕,然后媒体查询随着屏幕变大而改变).

我创建了这个网站,到目前为止我还没有找到为什么只在某些iPhone手机上,网站没有以其响应模式显示.(它在大多数iPhone手机上都能正确显示).

这是我到目前为止所做的:

1. 检查Android设备上的网站:它看起来不错
2. 检查不同浏览器上的响应式网站:它有效
3. 使用在线iphone模拟器来查看网站的外观:显示正常
4. 在iPhone设备上清除了浏览器缓存和cookie,这些问题显示响应模式:仍然没有运气

这是一个屏幕截图,显示网站主页应该如何在iphone中显示.

有谁知道为什么我的媒体查询代码不起作用？

 <div class="box"></div> 

 .box {
     background-color: red;
     width: 100%;
     height: 50px;
 } 

 @media only screen and (max-device-width: 768px)  {
     .box {border: 5px solid blue;}
 }

http://jsfiddle.net/N9mYU/

我是响应式设计界的新手.

我在我的设计中使用http://www.responsivegridsystem.com/.它告诉我添加以下标记

<!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->    
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements and feature detects -->
<script src="vendors/responsive/js/modernizr-2.5.3-min.js"></script>

由于媒体查询在IE8中不起作用,根据IE7的这个问题,IE8支持css3媒体查询我也使用以下标记

<!--[if lt IE 9]>
    <script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->    

这些都需要吗？什么是html5shim,modernizr和css3mediaqueiries之间的区别？

我需要使用modernizr吗？因为我在js文件中没有做任何事情,比如jQuery.

使用grid-template-columns: repeat(auto-fit, minmax(600px, 1fr))可以轻松构建响应式CSS网格.容器将填充尽可能多的元素,而不使用媒体查询.

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.item {
  height: 100px;
  background: #ccc;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

问题是当屏幕小于指定的最小值时,项目比屏幕宽minmax().您可以通过添加媒体查询来解决此问题400px,但这仅在您知道容器周围没有内容时才有效.当容器可以放在任何地方时,这几乎是不可能的.

有没有办法或财产告诉这些项目他们永远不应该超过100%？

类似的东西:用尽可能多的400px物品填充容器,但要确保它们的宽度不超过容器宽度的100%.

CodePen演示