|
|
@@ -11,24 +11,28 @@
|
|
|
<body>
|
|
|
<script>
|
|
|
(function (doc, win) {
|
|
|
+ //用原生方法获取用户设置的浏览器的字体大小(兼容ie)
|
|
|
+ if (doc.documentElement.currentStyle) {
|
|
|
+ var user_webset_font = doc.documentElement.currentStyle['fontSize'];
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ var user_webset_font = getComputedStyle(doc.documentElement, false)['fontSize'];
|
|
|
+ }
|
|
|
+ //取整后与默认16px的比例系数
|
|
|
+ var xs = parseFloat(user_webset_font) / 16;
|
|
|
var docEl = doc.documentElement, //根元素html
|
|
|
- //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
|
|
|
- resizeEvt = 'orientationchange' in window ?
|
|
|
- 'orientationchange' :
|
|
|
- 'resize',
|
|
|
- recalc = function () {
|
|
|
- var clientWidth = docEl.clientWidth;
|
|
|
- if (!clientWidth) {
|
|
|
- return;
|
|
|
- }
|
|
|
- //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
|
|
|
- docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
|
|
|
- // console.log((120 * (clientWidth / 1920)) * 0.2);
|
|
|
- };
|
|
|
- //alert(docEl)
|
|
|
- if (!doc.addEventListener) {
|
|
|
- return;
|
|
|
- }
|
|
|
+ //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
|
|
|
+ resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
|
|
|
+ recalc = function () {
|
|
|
+ var clientWidth = docEl.clientWidth;
|
|
|
+ if (!clientWidth) return;
|
|
|
+ if (clientWidth < 1920) {
|
|
|
+ docEl.style.fontSize = 100 * (clientWidth / 1920) / xs + 'px';
|
|
|
+ } else {
|
|
|
+ docEl.style.fontSize = 100 + 'px';
|
|
|
+ }
|
|
|
+ };
|
|
|
+ if (!doc.addEventListener) return;
|
|
|
win.addEventListener(resizeEvt, recalc, false); //addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
|
|
|
doc.addEventListener('DOMContentLoaded', recalc, false) //绑定浏览器缩放与加载时间
|
|
|
})(document, window);
|
