针对IE7的响应式设计的最佳解决方案/框架 [英] Best solution/framework to Responsive Design for IE7

问题描述

对于仍然不知道响应式设计的用户，我建议此链接

For those who still don't know about Responsive Design I suggest this link

只是因为它不了解媒体查询：

As long at it doesn't understand media querys like:

@media screen and (max-width: 1280px)   {
    h1 { font-size: 120px; padding: 10px; color:#999999 !important; }
    h2{font-size:35px;}
}


@media screen and (max-width: 1024px)   {
    h1 { font-size: 90px; padding: 1px; color:#999 !important; }
    h2{font-size:25px;}

}

@media screen and (max-width: 740px)    {
    h1 { font-size: 70px; padding: 1px; color:#999 !important; }
    h2{font-size:16px;}
    .left-col { width: 100%; }
    .sidebar { width: 100%; }
}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 478px)    {
    h1 { font-size: 50px; padding: 1px; color:#999; }
    h2 { font-size: 12px; padding: 1px; }
    body { font-size: 13px; }
}

我正在考虑使用 adapt.js 与您可以执行：

I was considering to use adapt.js wich with you can Do:

<script>
// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: 'assets/css/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = mobile.min.css',
    '760px  to 980px  = 720.min.css',
    '980px  to 1280px = 960.min.css',
    '1280px to 1600px = 1200.min.css',
    '1600px to 1940px = 1560.min.css',
    '1940px to 2540px = 1920.min.css',
    '2540px           = 2520.min.css'
  ]
};
</script>
<script src="assets/js/adapt.min.js"></script>

这意味着与 960 grid 但是你仍然可以使用任何你喜欢的那些.css

It's meant to be used with 960 grid But you can still use whatever you like in those .css

但问题是你需要启用javascript。我希望任何人都知道更灵活（响应！）解决方案，任何？

But the problem is that you need javascript enabled. I was hoping any of you know a more flexible (responsive!) solution, any?

推荐答案

我将使用adapt.js，但我发现一些JS，使老式浏览器（包括IE7）上的媒体查询功能。

Just looking into this. I was going to use adapt.js, but I found some JS that enables media query functionality on older browsers (including IE7).

这样，没有JS的新的浏览器将仍然工作正常，响应式设计将回到最小版本的唯一情况是

这是我发现的两个最好的JS媒体查询回退：

That way newer browsers without JS will still work properly, the only situation where the responsive design will fall back to the smallest version is on

Here are two of the best JS media query fallbacks I have found:

https://github.com/scottjehl/Respond

压缩后，响应大约为3kb，并支持基本的媒体查询需要简单的响应式设计（最小/最大宽度）

Respond is around 3kb when compressed and supports the basic media queries that you would need for simple responsive design (min/max-width)

http://code.google.com/p/css3-mediaqueries- js /

在< 16kb缩小了一点点。支持更广泛的媒体查询（未测试，但在响应网站上引用）

A bit bigger at <16kb minified. Supports a wider range of media queries (not tested, but it is referenced on the Respond site)

这篇关于针对IE7的响应式设计的最佳解决方案/框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！