css - 不同浏览器和设备上的不同 css，响应能力

Question

我正在尝试使网站响应 WORDPRESS，因此当使用不同的设备和使用不同的浏览器检查网站时，每个地方都使用相同的 css。

所以我决定使用以下格式将我的网站分为 3 个不同的部分，适用于普通电脑、平板电脑和智能手机:

@media (min-width:767px){}
@media (max-width:766px) and (min-width:400px) {}
@media only screen and (max-width: 399px) {}

然后针对不同的浏览器我正在做的:

/*edge*/
@supports (-ms-ime-align:auto) and (max-width:400px)  {}
/*chrome*/
@media (-webkit-min-device-pixel-ratio:0) and (max-width: 766px) and (min-width: 400px) {}

问题是我不能为 opera 和 firefox 做同样的事情，我的意思是我为 firefox 做了这个:

/*firefox
@supports (-moz-appearance:none) and (max-width: 399px){
    #pg-4-0{
        height: 1400px!important;
    }
    #newROW{
        margin-top: 20px;
    }
}
*/
/*
@supports (-moz-appearance:none) and (max-width: 399px) {
    #pg-4-0{
        height: 1150px!important;
    }
    #newROW{
        margin-top: 20px;
    }
}
*/

但它无法正常工作，我不得不将其删除。这是实现响应能力的正确方法吗？

有更好的方法吗？

我如何为 Firefox 和 Opera 执行此操作？ (我使用 wordpress 制作了网站:https://www.haagsehof.nl/)

Answer 1

Is this correct way of implementing the responsiveness?

is there a better way to do this?

不能说这是否是最好的方法，但我的建议是:不要进行浏览器检测。这是一场猫捉老鼠的游戏，你永远看不到尽头。

在 IE 还是流行浏览器 (eww) 的时代，我们必须进行浏览器检测以应用自定义“hack”，以确保网站在所有主要浏览器(包括 Internet Explorer 本身)上的外观和行为基本相同。

然而，如今大多数主要浏览器都遵循相同的网络标准，因此大多数 CSS 规则/属性在每个浏览器中的行为方式几乎相同，因此不再需要浏览器检测。我们现在做的是feature detection : 检查浏览器是否支持给定的功能(例如 multiple background images )，如果不支持，则提供合适的回退。

此外，要确保每个 HTML 元素在大多数现代浏览器中的行为和外观都相同(因为每个浏览器通常都有自己的一组默认 CSS 规则)，而不管使用的是什么屏幕分辨率，您可以使用 CSS resets顾名思义，它会将所有 HTML 元素的样式重置为一致的基线。就个人而言，我更喜欢使用 normalize.css因为它不像 CSS 重置那样具有侵略性，而且还包含一些有用的规则。

最后，这是一篇来自 Google 的关于响应式网页设计的精彩文章，应该可以帮助您走上正轨:Responsive Web Design Basics .