从 bootstrap.css 创建非响应式 CSS答案

【问题标题】：Create non-responsive CSS from bootstrap.css从 bootstrap.css 创建非响应式 CSS
【发布时间】：2013-09-24 20:02:19
【问题描述】：

由于 IE

编辑：我正在使用 Twitter Bootstrap 3

【问题讨论】：

标签： css twitter-bootstrap responsive-design media-queries

【解决方案1】：

Bootstrap 3 和媒体查询不支持 - ie7。即使你使用任何像 Respond.js 这样的 polyfill，你也可以让 IE6-8 响应媒体查询。但是bootstrap-3.0是针对移动优先的设计方法，不支持ie7。但是，如果您在媒体查询之外定义所有实际设计，那么一切都应该没问题。它将在所有浏览器上运行。如果真的要支持ie7，那就用bootstrap 2吧。*

在你的 html 中使用条件语句，如下所示：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">

然后通过以下方式定位您的浏览器：

.lt-ie9  .btn-nav
                {
                //for ie 8 only, change following.
                    margin: 0;
                    display: inline-block;
                }
.lt-ie8 .btn-nav{
// for ie 7
background: white;
}

或者只是简单地定义您的标准 css，它应该适用于文件顶部的所有浏览器，而无需媒体查询。这应该是编写 css 的首选方式，并结合了上述良好实践。

或use a polyfill like Respond.js 使媒体查询适用于 ie6-8

【讨论】：

使用条件 cmets 为 IE 添加类似乎工作量太大，因为我不得不从 Bootstrap 重新定义所有样式。 Aa Bootstrap 3 是移动优先的，标准 css 针对小型设备进行了优化，但可以覆盖整个屏幕。我也尝试过 respond.js 和 css-mediaqueries.js，但都没有工作。既不使用 CDN 中的 CSS，也不使用本地文件。
@JohannesTrümpelmann 你不需要重新定义任何东西。几乎所有用 bootstrap 编写的 css 都独立于其他组件。您必须编写应该在所有浏览器上运行的标准 css，而不是媒体查询，然后在 css 文件中的页面下的媒体查询下修改它。
@JohannesTrümpelmann 检查我更新的答案。如果您使用的是 bootstrap 2.*，则可以直接支持 ie7/8，如果使用的是 bootstrap 3.0，则不支持 IE7
@JohannesTrümpelmann 在查看您编辑的问题后，我修改了我的答案。请阅读。