手机自适应

原创 2017年09月11日 21:25:28
(function (doc, win) {
        if (!doc.addEventListener) {
            return;
        }
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) {
                    return;
                }
                docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
                // 此处设置在375px宽的可视区下,1rem = 20px
            };
        recalc();
        win.addEventListener(resizeEvt, recalc, false);
    })(document, window);

网络上大多数人写法如下

<script type="text/javascript">
        (function (doc, win) {
            if (!doc.addEventListener){
                return;
            }
            var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth){
                    return;
                }
                docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
                // 此处设置在375px宽的可视区下,1rem = 20px
            };
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false); 
        })(document, window);
    </script>

稍微解释一下上面的代码
document文档对象模型 window浏览器对象模型
document.documentElement.clientWidth 获取可视区的高度
orientationchange:用户改变水平或垂直方向时触发。(浏览器窗口改变大小触发)
DOMContentload:DOM结构加载完毕时触发。

我本人喜欢第一种写法,有没有大神解释一下为什么都用下面这种写法。我个人觉得应该是加载html前就让他font-size改变,而不是等到加载完html之后在改变font-size

版权声明:本文为博主原创文章,未经博主允许不得转载。

手机web——自适应网页设计(html/css控制)

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。 meta name="viewport" conte...
  • woshinia
  • woshinia
  • 2014年02月11日 17:39
  • 7424

手机web——自适应网页设计(html/css控制)

手机web——自适应网页设计(html/css控制) 2013-09-04 11:02 佚名 68design 字号:T | T 就目前形势来看,Web App 正是眼下的一个趋...
  • hjq198988
  • hjq198988
  • 2015年05月04日 13:14
  • 5129

HTML5 移动页面自适应手机屏幕四类方法

1、使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。...
  • baidu_36847344
  • baidu_36847344
  • 2017年03月21日 15:03
  • 9527

Landor触屏版自适应响应式html5手机

  • 2015年08月18日 09:00
  • 5.22MB
  • 下载

Agency触屏版自适应响应式html5手机wap网站模板下载

  • 2015年04月23日 12:37
  • 5.15MB
  • 下载

Legend触屏版自适应响应式html5手机wap网站模板下载

  • 2015年04月21日 11:29
  • 1.71MB
  • 下载

Dopetrope触屏版自适应响应式html5手机wap网站模板下载

  • 2015年04月21日 11:26
  • 776KB
  • 下载

中国军事网站-战争前沿触屏版自适应html5手机新闻网站模板下载

  • 2014年11月10日 14:32
  • 50KB
  • 下载

MP3音乐歌曲下载触屏自适应html5手机wap音乐网站模板下载

  • 2014年11月10日 14:24
  • 244KB
  • 下载

深圳同仁妇科医院触屏版自适应html5手机医院网站模板下载

  • 2014年11月10日 14:26
  • 743KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手机自适应
举报原因:
原因补充:

(最多只允许输入30个字)