响应媒体查询 - 我在哪里放什么代码？

这将是我第一个完全响应的网站，所以我环顾四周，在帖子的底部找到了基本的媒体查询，这似乎与某些方式或形式的大多数设备相匹配。响应媒体查询 - 我在哪里放什么代码？

我从任何这些查询之外的代码开始（即针对平均桌面）。然后，我开始了第一个移动媒体查询，但第二个规则对我没有意义（即大于321像素的所有内容）。

它似乎意味着大于321到768这是下一个规则。我认为我误解了这是如何工作的？任何人都可以用足够简单的方式解释这个吗？我开始认为我所有的CSS代码都应该放在这些媒体查询中，而且我应该没有先开始使用移动版本，然后随着解决方案的扩大逐渐扩展它。

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) 
{ 

} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) and (orientation: landscape) 
{ 

} 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 
{ 

} 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) 
{ 

} 

/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) and (orientation: landscape) 
{ 

} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) 
{ 

}

来源

2013-03-21 Jacques

你似乎明白了，第二条规则是指与横向的任何设备将遵循什么是媒体查询里面，然后在它下面的任何查询将覆盖它的外面，所以下一个媒体查询将被使用。如果在媒体查询之外没有代码，则在第三条规则中有一个最大值时，在1024像素和1224像素之间不会应用任何样式。 – gaynorvader 2013-03-21 14:35:08

感谢gaynorvader，我是正确的话，即使有定向法则仍然必须由屏幕尺寸遵守规则也是如此。即风景+屏幕尺寸不超过321像素？ – Jacques 2013-03-28 13:54:57

@Jaques Thaat的正确。 – gaynorvader 2013-03-28 14:04:28

的媒体查询的目的是使他们看起来好一个特定的窗口/屏幕尺寸改变的元素。
移动第一个设计开始流行起来。本质上，开发人员在移动设备上创建要优化的网站（外观和行为最佳）。接下来，他逐渐在他的css结尾处插入媒体查询来覆盖原始的css。他这样做是为了使页面适应用户的窗口/屏幕大小，从而获得更好的体验。

下面是一个例子：

.ImageGalleryItems { 
    float: none; 
    clear: both; 
    background-color: black; 
} 
@media only screen and (min-width: 768px) { 
    float: left; 
    background-color: white; 
}

现在，每当用户的屏幕尺寸小于768px越大，图像的项目将左浮动，而不是显示彼此相邻。另外，背景颜色也会改变。

这是您可以使用的原则。如果您先开发移动设备，请勿在原始css中添加:hover效果，因为这些效果不适用于移动设备。然后，使用媒体查询为桌面添加这些效果。这可以节省数据使用并创建更清晰的代码

来源

2013-03-21 14:50:14

谢谢德里克，关于悬停状态的好处。我得到了基本规则，但我认为令人困惑的是如何知道屏幕尺寸。 321px似乎是iPhone4的常见肖像尺寸，但是您是否为三星s3和三星Note 2增加了另一个规则？或者，我们是在看一个范围，然后依靠流体网格来完成剩下的工作？即321px可以有一组规则，然后将s3和Note2组合在一起？ – Jacques 2013-03-28 14:07:55

我觉得你有点过头了。减少媒体查询的数量，并添加一些断点，让设计在某种程度上“打破”。

考虑在查询中放置什么：一种方法是编写某种形式的通用CSS，然后覆盖媒体查询中的一些属性。另一种方法是简单地跳过常规CSS中的“交替”属性并将其设置在每个查询中。

所以：你不写所有的CSS在媒体查询中。只是你想改变的东西。

来源

2013-03-21 14:37:48 AntonNiklasson

这是相当多的媒体查询 - 我想想你是否真的需要所有这些。

您可以先从手机或桌面上开始处理这些问题。真的没有区别。

我建议看看哪些媒体查询Bootstrap用作它们的默认值。

http://twitter.github.com/bootstrap/scaffolding.html#responsive

来源

2013-03-21 14:39:18

将所有内容都放在媒体查询中并不是必须的。媒体查询将仅适用于属于该查询的设备和/或屏幕大小。

@media 1不一定会影响@media 2。

注意：您也可以把你的媒体查询以逗号分隔列表，以节省时间。

这是多么我已经做到了我的网站上：

/* styles for desktops */ 
body{width:100%;} 

img{width:100%;} /* and so on */ 


@media handheld and (max-width: 960px), 

screen and (max-width: 960px), 

only screen and (min-device-width : 768px) and (max-device-width : 1024px), 

only screen and (min-device-width : 320px) and (max-device-width : 480px), 

only screen and (-webkit-min-device-pixel-ratio : 1.5), 

only screen and (min-device-pixel-ratio : 1.5) 

{ 
    /*Styles for non desk-tops*/ 
    /*You Only Need to put styles you want to change in here*/ 
    img{width:90%;} 
}

我希望这有助于。

来源

2013-03-21 15:37:24 apaul

谢谢，我没有考虑链接这样的规则。 – Jacques 2013-03-28 13:59:39

大部分只是赞同已经说过的内容：您正在设计之间大小，而不是特定的大小。要记住的最重要的事情是以百分比而不是固定宽度来放置所有东西。这样做的结果是，您应该只需要三个查询：一个用于桌面，一个用于平板电脑，另一个用于移动设备。

来源

2013-08-04 16:19:52

始终使用台式机和移动媒体查询，如果你不这样做，因为整个CSS将呈现到浏览器，占用空间和减慢UR网页（不多，但能获得巨大的，如果你有一个大的web应用程序）。所以我的建议是设置桌面和移动媒体查询。因此，当它加载时，只加载与规格有关的媒体查询，没有额外的或无用的。

来源

2014-01-10 08:33:40 ravi

响应媒体查询 - 我在哪里放什么代码？

回答

相关问题