javascript IE7 响应式设计的最佳解决方案/框架
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7444658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best solution/framework to Responsive Design for IE7
提问by Toni Michel Caubet
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.jswich with you can Do:
我正在考虑使用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>
It's meant to be used with 960 gridBut you can still use whatever you like in those .css
它旨在与960 网格一起使用但您仍然可以在那些 .css 中使用您喜欢的任何内容
But the problem is that you need javascript enabled. I was hoping any of you know a more flexible (responsive!) solution, any?
但问题是您需要启用 javascript。我希望你们中的任何人都知道一个更灵活（响应式！）的解决方案，有吗？
采纳答案by theorise
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).
只是在研究这个。我打算使用adapt.js，但我发现一些JS 可以在旧浏览器（包括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
这样，没有 JS 的较新浏览器仍然可以正常工作，响应式设计将回退到最小版本的唯一情况是
Here are two of the best JS media query fallbacks I have found:
以下是我发现的两个最好的 JS 媒体查询回退：
Respond
回应
https://github.com/scottjehl/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)
压缩后响应大约为 3kb，并支持简单响应式设计所需的基本媒体查询（最小/最大宽度）
css3-mediaqueries-js
css3-mediaqueries-js
http://code.google.com/p/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)
在 <16kb 缩小时更大一点。支持更广泛的媒体查询（未测试，但在响应站点上引用）
回答by John Slegers
I don't know of any way to make a website responsive in IE6-8 without using Javascript. It is, however, possible to just serve a desktop version of your website to these browsers and make it responsive in all other browsers. I believe this is the best approach, since IE6-8 are (almost?) exclusively used on desktops anyway.
我不知道有什么方法可以在不使用 Javascript 的情况下使网站在 IE6-8 中具有响应性。但是，可以只向这些浏览器提供您网站的桌面版本，并使其在所有其他浏览器中响应。我相信这是最好的方法，因为 IE6-8（几乎？）无论如何都专门用于桌面。
Cascade Frameworkis the only CSS framework I know with a grid system that implements this technique.
Cascade Framework是我所知道的唯一一个带有实现这种技术的网格系统的 CSS 框架。
回答by johna
I didn't like the idea of some of the alternatives to make old browsers work with media queries. Loading the CSS file via AJAX and parsing it doesn't sound too efficient to me.
我不喜欢让旧浏览器处理媒体查询的一些替代方案。通过 AJAX 加载 CSS 文件并解析它对我来说听起来效率不高。
Another option to make responsive websites for IE7 or even IE5/6 is to use JavaScript to apply classes based on screen width, similar to media queries. This works with all browsers as long as JavaScript is enabled. You can have a default resolution which is served if JavaScript is disabled.
为 IE7 甚至 IE5/6 制作响应式网站的另一种选择是使用 JavaScript 根据屏幕宽度应用类，类似于媒体查询。只要启用了 JavaScript，这适用于所有浏览器。如果 JavaScript 被禁用，您可以使用默认分辨率。
This is described here.
这在此处进行了描述。
Some sample JavaScript to accomplish this:
一些示例 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>
