javascript - IE7响应式设计的最佳解决方案/框架

Question

对于那些仍然不了解响应式设计的人，我建议 this link

只要它不理解像这样的媒体查询:

@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你可以这样做:

<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 中使用任何你喜欢的东西

但问题是您需要启用 JavaScript。我希望你们中的任何人都知道更灵活( react 灵敏!)的解决方案，有吗？

Answer 1

只是看看这个。我打算使用 adapt.js，但我发现了一些 JS 可以在旧浏览器(包括 IE7)上启用媒体查询功能。

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

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

---

响应

https://github.com/scottjehl/Respond

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

---

css3-mediaqueries-js

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

缩小后 <16kb 时更大一些。支持更广泛的媒体查询(未测试，但在 Respond 网站上有引用)

---