MAX 到 MIN 媒体查询 CSS答案

【问题标题】：MAX to MIN Media queries CSSMAX 到 MIN 媒体查询 CSS
【发布时间】：2015-02-01 16:51:12
【问题描述】：

我正在尝试使用移动优先的响应式设计方法。

这样做时，我希望将我的 MAX 媒体查询转换为 MIN 媒体查询。
因此，我的目标不是使用优雅降级，而是实现渐进增强

谁能解释重新设计我的 CSS 以使用 MIN-width 媒体查询而不是 MAX-width 的最佳方法？

在下面的示例中，我修剪了 95% 的 css 并留下了断点

//------------------主CSS

html {
    box-sizing: border-box; /* apply borderbox  to * */
}

*, *:before, *:after {
    box-sizing: inherit;
}}

//--------------------------------媒体

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

#body {
    display:none!important;
} }

//--------------------------------媒体

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

#header {
    height: 17.3em;
} }

【问题讨论】：

标签： html css media-queries

【解决方案1】：

这完全取决于您网站的其他部分。有些网站可以在 400px 的宽度上很好地显示，而有些网站需要设置一个最小值，因为它太小而无法以干净的方式呈现文档对象。很多时候，在针对移动设备进行优化时，您甚至不需要使用 min-width 或 max-width，还有更多更好的做法。以下是其中一些：

在 Px 上使用 Em - 以“em”而不是“px”为单位设置字体大小和其他大小总是更好。这是因为在手机上像素非常小，而 em 单位按比例将对象调整到适合屏幕的大小。

使用百分比 - 您会发现使用百分比比指定元素的宽度或高度（以像素或 em）要友好得多。如果你使用百分比，你的内容总是能很好地适应窄显示。

避免绝对定位的元素 - 绝对定位的元素在小型显示器上更难处理。它很简单，因为绝对元素可能太靠近相对定位的元素。尽可能使用相对定位来获得干净的网站。

【讨论】：

【解决方案2】：

@media 最小宽度：

最小宽度媒体查询非常容易使用，并且与使用 MAX 媒体查询没有太大区别。

这是使用您的代码的示例：

@media only screen and (min-width: 740px) {
    /*Your CSS for all screens larger than this*/
}

@media only screen and (max-width: 740px) {
    /*Your CSS for all things smaller than 740px*/
}

@media only screen and (max-width: 600px) {
    /*Your CSS for all things smaller than 600px*/
}

重要的是仍然使用 max-width 来限制某些屏幕上的对象样式。如果您希望某些样式应用于较小的对象，然后将相同的样式应用于较大的对象，则使用 min-width 会特别有用。这样，您可以保持最小尺寸的样式，但也可以为较大的对象添加额外的样式，而不会影响较小的对象。

例如：

@media only screen and (min-width: 900px) {
    /*You CSS here*/
}

在上面的示例中，尺寸超过 740 像素的屏幕中的样式已经应用于任何尺寸超过 900 像素的屏幕。从那里您可以根据需要调整样式，从而减少生成页面所需的代码量。

其他事项：

-当涉及到屏幕上的实际元素（不包括@media 的最小/最大尺寸）时，使用百分比总是有帮助的，因为这样可以根据屏幕尺寸自动调整项目的大小。

-这是一个很棒的网站，可以帮助您进行媒体查询：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

【讨论】：