如何避免低分辨率下字体过大的问题？

Question

页面所采用的的单位为px，在一些低分辨率屏幕下会显得页面内容较大，字体较大。有什么好的技术方案吗？（低分辨率浏览器）一般都是用的ie8等不支持媒体查询的老版本浏览器。

Answer 1

function cssSize() {
    var whdef = 100 / 1920;// 表示1920的设计图,使用100PX的默认值
    var wH = window.innerHeight;// 当前窗口的高度
    var wW = window.innerWidth;// 当前窗口的宽度
    var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
    $('html').css('font-size', rem + "px");
    $(window).resize(function () {
        var whdef = 100 / 1920;// 表示1920的设计图,使用100PX的默认值
        var wH = window.innerHeight;// 当前窗口的高度
        var wW = window.innerWidth;// 当前窗口的宽度
        var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
        $('html').css('font-size', rem + "px");
    });
}
cssSize();
12px的字体写成0.12rem，14px的字体写成0.14rem

Answer 2

ie8也是可以支持响应式的，可以使用一些插件做到比如respond.js
像这样引入

<!--[if lt IE 9]>
      <script src="js/Respond.js"></script>
    <![endif]-->

但是这个插件不支持@import引入的css，也只能使用宽度查询，不过一般是够用的
另外跨域也需要也别设置这个文档里有

Answer 3

可以试试 amfe-flexible：
https://github.com/amfe/lib-f...

Answer 4

在JS里面检测userAgent浏览器的用户代理，当检测到Ie8等浏览器时，改变style的字体大小