在html 的head中加上这代码
这段红色的部分只有在IE浏览器环境下才会触发，必须写在header中
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if IE]>
<script src="js/ie_font_size.js" type="text/javascript"></script>
<![endif]-->
<title>Document</title>
</head>
<body>
</body>
</html>
window.onload的保证文档节点都加载完成后执行，然后能把属性添加到对应的html对象中
JS部分代码：
window.onload = function () {
function getWidth(){
var winWidth;
var winHeight;
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if ( document.documentElement && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
return winWidth;
}
var width_true=getWidth();
//字体大小更改函数
function fontsize_change(winWidth){
if(winWidth>=1680){
document.getElementById('box').style.fontSize="20px";
}
else if(winWidth>=1366&&winWidth<1680){
document.getElementById('box').style.fontSize="16px";
}
else if(winWidth>=1200&&winWidth<1366){
document.getElementById('box').style.fontSize="13px";
}
else if(winWidth<1200){
document.getElementById('box').style.fontSize="12px";
}
}
fontsize_change(width_true);
};
但是这种不是自适应，他只能执行一次。页面加载后字体大小就固定了。
而且，用窗口大小倒不如直接获取分辨率大小来判断，这样的话会好一点。
但是在一定程度上是解决IE不能@media的一种思路。
其实如果说在这个JS文件中添加一个页面变换事件的话，同时调用这个判断函数就可以完美解决IE不能实现@media的情况
279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
