html - MAX 到 MIN 媒体查询 CSS

Question

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

这样做时，我希望将我的 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;
} } 

Answer 1

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

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

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

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