Javascript IE7响应性设计的最佳解决方案/框架

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

只要它不理解媒体的疑问，比如：

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

我正在考虑使用你可以做的：

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

//编辑以满足您的需要。
变量自适应_配置={
//你的CSS在哪里？
路径：“assets/css/”，
//false=仅在第一次加载页面时运行一次。
//true=更改窗口大小和页面倾斜。
动态：是的，
//第一个范围输入是最小值。
//最后一个范围输入是最大值。
//通过“to”关键字分隔范围。
范围：[
'0px到760px=mobile.min.css'，
“760px到980px=720.min.css”，
'980px到1280px=960.min.css'，
“1280px到1600px=1200.min.css”，
'1600px到1940px=1560.min.css'，
'1940px至2540px=1920.min.css'，
“2540px=2520.min.css”
]
};

它本应该与一起使用，但是你仍然可以在那些.css中使用你喜欢的任何东西

---

但问题是您需要启用JavaScript。我希望你们中的任何人都知道一个更灵活（响应更快！）的解决方案，有吗？

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

这样，没有JS的新浏览器仍能正常工作，只有在这种情况下，响应性设计才会退回到最小版本 以下是我发现的两个最好的JS媒体查询回退：

---

回应

Respond在压缩时大约为3kb，支持简单响应设计所需的基本媒体查询（最小/最大宽度）

---

css3媒体查询js

---

如果不使用Javascript，我不知道有什么方法可以让一个网站在IE6-8中做出响应。然而，您可以只向这些浏览器提供您网站的桌面版本，并使其在所有其他浏览器中响应。我相信这是最好的方法，因为IE6-8（几乎？）只在台式机上使用

是我所知道的唯一一个使用网格系统实现这种技术的CSS框架

---

.

我不喜欢让旧浏览器处理媒体查询的一些替代方案。通过AJAX加载CSS文件并对其进行解析对我来说效率不高

为IE7甚至IE5/6创建响应性网站的另一个选择是使用JavaScript根据屏幕宽度应用类，类似于媒体查询。这适用于所有浏览器，只要启用了JavaScript。如果禁用JavaScript，您可以使用默认的解析

这是描述的

一些示例JavaScript可以实现这一点：

<script type="text/javascript">
    function hasClass(el, cls) {
        return el.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    function addClass(el, cls) {
        if (!this.hasClass(el, cls)) el.className += " " + cls;
    }
    function removeClass(el, cls) {
        if (hasClass(el, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            el.className = el.className.replace(reg, ' ');
        }
    }

    var addEvent = function (elem, type, eventHandle) {
        if (elem == null || elem == undefined) return;
        if (elem.addEventListener) {
            elem.addEventListener(type, eventHandle, false);
        } else if (elem.attachEvent) {
            elem.attachEvent("on" + type, eventHandle);
        } else {
            elem["on" + type] = eventHandle;
        }
    };

    function responsive() {
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

        for (var i = 0; i < breakpoints.length; i++) {
            if (breakpoints[i][0] == "max-width") {
                if (w <= breakpoints[i][1]) {
                    addClass(document.getElementById(id), breakpoints[i][2]);
                }
                else {
                    removeClass(document.getElementById(id), breakpoints[i][2]);
                }
            }
            else if (breakpoints[i][0] == "min-width") {
                if (w >= breakpoints[i][1]) {
                    addClass(document.getElementById(id), breakpoints[i][2]);
                }
                else {
                    removeClass(document.getElementById(id), breakpoints[i][2]);
                }
            }
        }
    }

    var resizeTimeoutId;

    function resized() {
        window.clearTimeout(resizeTimeoutId);
        resizeTimeoutId = window.setTimeout('responsive();', 10);
    }

    var id = "body";
    var breakpoints = [["max-width", 630, "max630"], ["min-width", 1890, "min1890"]];

    addEvent(window, "resize", resized);

    responsive();
</script>

函数类（el、cls）{
返回el.className.match（新的RegExp（“（\\s | ^）”+cls+”（\\s |$））；
}
函数addClass（el、cls）{
如果（！this.hasklass（el，cls））el.className+=“”+cls；
}
函数removeClass（el、cls）{
if（HASSCLASS（el、cls））{
var reg=new RegExp（“（\\s | ^）”+cls+”（\\s |$）；
el.className=el.className.replace（reg.）；
}
}
var addEvent=函数（元素、类型、事件句柄）{
if（elem==null | | elem==undefined）返回；
if（元素addEventListener）{
元素addEventListener（类型、事件句柄、false）；
}else if（附件要素）{
元素attachEvent（“on”+类型，事件句柄）；
}否则{
元素[“on”+类型]=事件句柄；
}
};
功能响应（）{
var w=window.innerWidth | | | document.documentElement.clientWidth | | document.body.clientWidth；
对于（var i=0；i

将对DownVoteTanks分享精彩杂志链接发表评论，这是非常有趣的信息！我刚进入这个行业，也给我留下了深刻的印象！Respond.js是一个不错的选择；）我知道我真的来晚了，但你们中有人试过在twitter引导或Metro用户界面上使用Respond.js吗？许多公司客户仍然使用IE7-8，因此必须为他们提供支持：/