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

问题描述

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

只要它不理解媒体查询，例如:

@media screen and (max-width: 1280px) {h1 { 字体大小:120px;填充:10px；颜色:#999999 ！重要；}h2{字体大小:35px;}}@media 屏幕和(最大宽度:1024px){h1 { 字体大小:90px;填充:1px；颜色:#999 ！重要；}h2{字体大小:25px;}}@media 屏幕和(最大宽度:740 像素){h1 { 字体大小:70px;填充:1px；颜色:#999 ！重要；}h2{字体大小:16px;}.left-col { 宽度:100%;}.sidebar { 宽度:100%;}}@media 屏幕和(最大宽度:480 像素){}@media 屏幕和(最大宽度:478px){h1 { 字体大小:50px;填充:1px；颜色:#999；}h2 { 字体大小:12px;填充:1px；}正文 { 字体大小:13px;}}

我正在考虑使用 adapt.js 与您一起可以做到:

<script src=assets/js/adapt.min.js"></script>

它旨在与 960 网格一起使用 但是您仍然可以在那些 .css 中使用您喜欢的任何内容

但问题是您需要启用 JavaScript.我希望你们中的任何人都知道一个更灵活(响应式！)的解决方案，有吗?

解决方案

正在研究这个.我打算使用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 站点上有引用)

---

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; }
}

I was considering to use adapt.js which 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>

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

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

解决方案

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).

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:

---

Respond

https://github.com/scottjehl/Respond

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

---

css3-mediaqueries-js

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

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屋！