标签: media-queries

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

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

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

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

我正在尝试使用CSS媒体查询,专门针对iPhone.

当我使用常规链接rel时它可以工作:

<link rel="stylesheet" type="text/css" href="css/mobile.css" />

但是,当我尝试此媒体查询时,它不起作用:

<link rel="stylesheet" type="text/css" href="css/mobile.css" 
      media="only screen and (max-width: 640px)" /> 

如何使用CSS媒体查询来定位iPhone？

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

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

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

我正在建立一个响应式设计的网站.我需要区分横向模式下的平板电脑和带有媒体查询的桌面之间的布局.这些是媒体查询:

<link href="base.css" rel="stylesheet"/>
<link href="desktop.css" 
media="only screen and (min-width: 801px)" rel="stylesheet"/>
<link href="tablet.css" 
media="only screen and (min-width: 629px) and (max-width: 800px) and 
(orientation:portrait), 
only screen and (min-height:629px) and (max-height:800px) and 
(orientation:landscape)" rel="stylesheet"/>

desktop.css在横向模式下,平板电脑包含问题.iPad在风景中很1024px广泛,这是PC的常见解决方案.如何通过媒体查询将1000px横向模式中的宽dekstop与平板电脑区分开来？

PS我必须使用媒体查询,因为网站将被缓存/ CDNed等.任何服务器端检测都不起作用.

PS2.

<link href="desktop.css" 
media="only screen and (min-width: 801px), 
not only screen and (min-height:629px) and (max-height:800px) and 
(orientation:landscape)" rel="stylesheet"/>

没有解决问题.

有没有办法让HTML文件根据媒体属性使用不同的样式表？我知道该link方法采用媒体类型,但我发现的所有引用仅指示媒体类型,而不是扩展查询.我也不确定如何确保只选择一个,以及哪一个.

基本上在我目前的CSS文件中,我有一个像这样的媒体部分(简化仅供参考):

@media (min-device-pixel-ratio: 1.5) {
  specific-media-rules
}

我想要的是,不是让这个部分和其他媒体非常类似的部分是为两个不同的文件提供服务.

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

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

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

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

 <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.

如果我在具有不同分辨率的2个不同系统上检查html,则视图会失真.

有没有办法在运行时计算屏幕宽度和高度？

我缺乏css的经验,但做了一些研究,发现:

https://css-tricks.com/css-media-queries/

但他们建议不同的课程.(如果我没错)

我的问题是可以在运行时获得高度和宽度,并只使用一个CSS？

就像是 :

.view {
min-width :"some how gets computed:which device we are using ?"
min-height :"some how gets computed:which device we are using ?"
}

使用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演示