移动端自适应布局方案尝试

问题

刚开始接触移动端H5页面的时候最困扰的几个问题是:

  1. 6或6p上明明是1px的边框怎么就成了2px或3px辣么粗!
  2. 图片,div等如何等比自适应设计图

后来慢慢知道了第一点是由于retina屏幕下设备像素比的问题造成,第二点知道了单位rem。

目的

不想因为使用rem而一一去计算设计稿的尺寸,设计稿750的尺寸的标注可以直接在sass中使用;字体不使用rem缩放,原因是:

显然,我们在iPhone3G和iPhone4的Retina屏下面,希望看到的文本字号是相同的。也就是说,我们不希望文本在Retina屏幕下变小,另外,我们希望在大屏手机上看到更多文本,以及,现在绝大多数的字体文件都自带一些点阵尺寸,通常是16px和24px,所以我们不希望出现13px和15px这样的奇葩尺寸。

还一个目的是,在页面没有设置viewport的时候动态设置,并且不让页面有一个“闪现”的过程(也就是刚加载没设置的状态到设置的状态);页面动态变化时,尺寸相应变化;

尝试

在写H5页面的时候,尽可能少的去写meta标签,我会这样做:

    viewport testtitle>head>

就这样简单,然后实现的代码当然是放在head里。因为并没有写viewport,所以得判断加上

if (!metaEl) {    metaEl = doc.createElement('meta');    metaEl.setAttribute('name', 'viewport');    metaEl.setAttribute('content', 'width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');    if (docEl.firstElementChild) {        docEl.firstElementChild.appendChild(metaEl);    } else {        var wrap = doc.createElement('div');        wrap.appendChild(metaEl);        doc.write(wrap.innerHTML);    }}

然后根据页面的devicePixelRatio缩放

var scale = parseFloat((1 / dpr).toFixed(2));if (dpr != 1) {    metaEl.setAttribute('content', 'width=device-width,initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no');}

设置根字体大小

// document widthfunction setDocumentFontSize () {    var width = docEl.getBoundingClientRect().width;    docEl.style.fontSize = width / 10 + 'px';}setDocumentFontSize();

页面resize监听

var timer;win.addEventListener('resize', function() {    clearTimeout(timer);    timer = setTimeout(function () {        setDocumentFontSize();    }, 300);}, false);

为了字体不使用rem,需要为documentElement设置data-dpr属性

// document data-dpr set font-size pxvar dpr = window.devicePixelRatio;if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                    dpr = 3;} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){    dpr = 2;} else {    dpr = 1;}docEl.setAttribute('data-dpr', dpr);

sass相关设置

完全根据设计稿尺寸写

// baseFontSize $baseFontSize: 75;@function px2rem($px){    @return $px/$baseFontSize * 1rem;}@function px2rem2($px){    @return px2rem($px*2);}

字体大小变化

// 字体大小计算@mixin font-dpr($font-size){    font-size: $font-size;    [data-dpr="2"] & {        font-size: $font-size * 2;    }    [data-dpr="3"] & {        font-size: $font-size * 3;    }}

例如:一个简单样式的设置

.test {    @include font-dpr(10px);    width: px2rem2(300);    margin: 0 auto;    border:1px # dcdcdc solid;}img {    display: block;    width: px2rem2(355);    margin: 0 auto;}

效果示例:

可以从图中看出,6p的dpr为3,字体相应为30px,页面缩放了3倍,正式我所想要的(图片可以右键在新的窗口打开看大图)。

页面demo源码

    viewport testtitle>     ;(function (win) {        var doc = win.document;        var docEl = doc.documentElement;        var metaEl = doc.querySelector('meta[name="viewport"]');        if (!metaEl) {            metaEl = doc.createElement('meta');            metaEl.setAttribute('name', 'viewport');            metaEl.setAttribute('content', 'width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');            if (docEl.firstElementChild) {                docEl.firstElementChild.appendChild(metaEl);            } else {                var wrap = doc.createElement('div');                wrap.appendChild(metaEl);                doc.write(wrap.innerHTML);            }        }        // document data-dpr set font-size px        var dpr = window.devicePixelRatio;        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                            dpr = 3;        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){            dpr = 2;        } else {            dpr = 1;        }        docEl.setAttribute('data-dpr', dpr);        var scale = parseFloat((1 / dpr).toFixed(2));        if (dpr != 1) {            metaEl.setAttribute('content', 'width=device-width,initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no');        }        // document width        function setDocumentFontSize () {            var width = docEl.getBoundingClientRect().width;            docEl.style.fontSize = width / 10 + 'px';        }        setDocumentFontSize();        var timer;        win.addEventListener('resize', function() {            clearTimeout(timer);            timer = setTimeout(function () {                setDocumentFontSize();            }, 300);        }, false);    })(window); script>head>
        显然,我们在iPhone3G和iPhone4的Retina屏下面,希望看到的文本字号是相同的。也就是说,我们不希望文本在Retina屏幕下变小,另外,我们希望在大屏手机上看到更多文本,以及,现在绝大多数的字体文件都自带一些点阵尺寸,通常是16px和24px,所以我们不希望出现13px和15px这样的奇葩尺寸。    div>

body>
html>

关键字:移动开发, 产品经理

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部