我的移动端适配方案

需要移动端适配的根本原因:屏幕窗口的大小,devicepixelratio值等。

简单介绍下devicepixelratio(设备像素比,即dpr) = physicalpixel (物理像素) / density-independent pixel(设备独立像素,即dip)。

在JavaScript中,可以通过window.devicePixelRatio获取到当前设备的dpr。而在CSS中,可以通过-webkit-device-pixel-ratio-webkit-min-device-pixel-ratio-webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。

dip或dp,(device independent pixels,设备独立像素)与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

移动端适配主要有两大不同的方向:响应式布局自适应布局

响应式布局是根据屏幕大小自动的调整布局位置(非单纯的缩放),实现适配

自适应布局则是根据屏幕大小自动的缩放大小,实现适配。个人喜欢自适应布局的这种方式。

1.纯css实现方式 -- 媒体查询

使用原生css来实现媒体查询是很繁琐的,因为每个媒体查询都要重写以便。推荐使用css的预编译器(sass,less,stylus)来实现,至于为什么要用预编译器,应该不用我说吧。

//less版本
html {
    font-size: 20px;
}
@media only screen and (min-width: 401px) {
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px) {
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px) {
    html {
        font-size: 30px !important;
    }
}
@media only screen and (min-width: 569px) {
    html {
        font-size: 35px !important;
    }
}
@media only screen and (min-width: 641px) {
    html {
        font-size: 40px !important;
    }
}
@media only screen and (min-width: 751px) {
    html {
        font-size: 50px !important;
    }
}
@media only screen and (min-width: 1080px) {
    html {
        font-size: 60px !important;
    }
}
@unit: 50rem; //基准单位,根据设计稿来确定。假设:设计稿尺寸为750,那么@unit设置为50rem(1rem=50px更方便下面计算)
.warp{with: 100 / @unit} // 设计稿上元素的尺寸为100px => .warp{with: 2rem}
.warp{with: 10 / @unit} // 设计稿上元素的尺寸为10px => .warp{with: 0.2rem}

这样当页面展示在750的屏幕上时,html的font-size为50px,那么当设置为2rem的元素显示的尺寸就为2*50px=100px。在其他尺寸的设备也会根据媒体查询设置的不同font-size进行自动缩放适配。
当然上面也提到了,在css中也是可以获取到devicePixelRatio的值,那么为了更精确在写媒体查询的时候可以把它也加上去,这里就不展开了。

2.js的实现方式

js的实现方式,参考了网易淘宝的实现方式,对他们进行了整合。并且修复了手机端1px问题

  • 网易实现方式是通过设备尺寸动态的设置DOM的根元素字体大小,没有考虑devicePixelRatio的因素;
  • 淘宝实现方式也是通过设备尺寸动态的设置DOM的根元素字体大小,并且考虑了devicePixelRatio的因素,但淘宝在设置rem时,显得较复杂(不方便写css把px转化成rem);
  • 1px问题简单点说就是因为devicePixelRatio的存在,css的1px不等于移动端的1px。
(function(doc, win, designSize) { //designSize为设计稿的尺寸(宽)

    var docEl = document.documentElement,
        devWidth = docEl.clientWidth > 1080 ? 1080 : docEl.clientWidth,
        dpr = devicePixelRatio || 1,
        scale = 1 / dpr,
        width = dpr * devWidth,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'onresize', //判断横屏和窗口重置
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            document.querySelector('meta[name="viewport"]')
                    .setAttribute('content','width=' + width +
                                ', initial-scale=' + scale +
                                ', maximum-scale=' + scale +
                                ', minimum-scale=' + scale +
                                ', user-scalable=no');
            docEl.style.fontSize = devWidth / (designSize / 100) * dpr + 'px';
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window, 750);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容