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

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

有更好的方法吗？

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

在IE是一个流行的浏览器（eww）的日子里，我们不得不进行浏览器检测以应用自定义＆＃34; hacks＆＃34;确保网站看起来＆amp;在所有主流浏览器上表现基本相同 - 包括Internet Explorer本身。

然而，现在大多数主流浏览器遵循相同的Web标准，因此大多数CSS规则/属性在每个浏览器中的行为几乎相同，因此浏览器检测不再是必需的。我们现在所做的是feature detection：检查浏览器是否支持给定的功能（例如multiple background images），如果它没有提供合适的后备功能。

另外，要确保每个HTML元素的行为和在大多数现代浏览器中看起来都是一样的（因为每个浏览器通常都有自己的一组默认CSS规则），与使用的屏幕分辨率无关，您可以使用CSS resets - 顾名思义 - 重置所有类型的样式HTML元素到一致的基线。就个人而言，我更喜欢使用normalize.css，因为它不像CSS重置那样具有攻击性，并且还包含一些有用的规则。

最后，Google提供了一篇关于响应式网页设计的精彩文章，可以帮助您走上正确的道路：Responsive Web Design Basics。

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

1 个答案: