Question

我试图使用MOBILE第一种方法进行响应式设计。

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

任何人都可以解释重新设计CSS以使用MIN宽度媒体查询而不是MAX宽度的最佳方法吗？

在下面的示例中，我已经裁掉了95％的css并且已经离开了断点

// ------------------------------ MAIN CSS

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

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

// -------------------------------- MEDIA

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

#body {
    display:none!important;
} }

// -------------------------------- MEDIA

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

#header {
    height: 17.3em;
} }

Answer 1

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

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

使用百分比 - 您会发现使用百分比比使用像素或 em指定元素的宽度或高度要友好得多。如果您使用百分比，您的内容将始终适应瘦小的显示。

避免使用绝对定位元素 - 绝对定位元素可能会更难以在小型显示器上处理。它可以，因为绝对元素可能太靠近相对定位的元素。尽可能使用相对定位的干净站点。

Answer 2

@media MIN-width：

最小宽度的媒体查询非常容易使用，与使用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*/
}

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

其他事项：

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

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

MAX到MIN媒体查询CSS

2 个答案:

@media MIN-width：

其他事项：