不同浏览器和设备上的不同 CSS，响应能力答案

【问题标题】：different css on different browsers and devices, responsiveness不同浏览器和设备上的不同 CSS，响应能力
【发布时间】：2018-03-07 23:07:01
【问题描述】：

我正在尝试使用 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/）

【问题讨论】：

标签： css wordpress responsive-design

【解决方案1】：

这是实现响应的正确方法吗？

有没有更好的方法来做到这一点？

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

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

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

此外，为了确保每个 HTML 元素在大多数现代浏览器中的行为和外观都相同（因为每个浏览器通常都有自己的一组默认 CSS 规则），而与所使用的屏幕分辨率无关，您可以使用 CSS resets 哪个- 顾名思义 - 将所有 HTML 元素的样式重置为一致的基线。就个人而言，我更喜欢使用normalize.css，因为它不像 CSS 重置那样激进，而且还包含一些有用的规则。

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

【讨论】：