移动端适配方案小结

  1. 云栖社区>
  2. 博客>
  3. 正文

移动端适配方案小结

云栖号资讯小哥 2020-04-17 14:27:15 浏览4641
展开阅读全文

云栖号资讯:【点击查看更多行业资讯
在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来!


流式布局

流式布局是一套典型的弹性布局,它的关键特点是:页面中的关键(布局)元素的宽高和位置都不会变化,只有容器元素在做拉伸变化,简单来说就是宽度的拉伸,快级盒子默认就能适应容器的宽度。这种布局对于页面简单的web app是足够了,比如拉钩的页面:

1

2

从上面的图片我们可以看到:

  • 顶部与底部的bar不管分辨率怎么变,它的高度和位置都不变
  • 中间每条招聘信息不管分辨率怎么变,招聘公司的图标等信息都位于条目的左边,薪资都位于右边,且高度也没有变化。

因此,对于这类简单的web app页面,我们如果要使用流式布局的话,只需要记住一个开发原则就可以了:文字流式、控件弹性,图片有需要等比缩放。 这种布局适配屏幕尺寸大于设计稿的设备是没有问题的,但是如果对于屏幕分辨率小于设计稿的设备,那么容器盒子里的内容可能放不小,需要媒体查询单独适配下。

rem布局

rem布局,开发过web app页面的童鞋,应该都很熟悉了。当分辨率变化的时候,我们通过js来改变html的font-size,然后我们就可以使用rem代替px了。

我们可以看到淘宝的页面在不同的屏幕下,页面有明显的等比变化。

3

4

直接上操作:

  • 先拿设计稿竖着的横向分辨率除以100(这个基数是为了计算方便而自己设定的,或者postcss-plugin-px2rem自动转换)得到body元素的宽度
  • 盒子高度为210px,写样式的时候css应该这么写:height: 2.1rem
  • 在header标签中加入,下面代码
var deviceWidth = document.documentElement.clientWidth
// 大于设计稿的横向分辨率时,始终按设计稿的宽来
if(deviceWidth > 750) deviceWidth = 750;

document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

这里写这么多,其实有个更好的方案,那就是

  font-size: 100vw / 750 * 100;
}

某些情况font-size不能使用rem,需要额外的媒介查询单独设置

    .m-navlist{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .m-navlist{font-size:16px}
}

@media screen and (min-width:400px){
    .m-navlist{font-size:18px}
}

flexible

flexible实现web app布局的前提是viewport的scale根据devicePixelRatio动态设置:

  • devicePixelRatio为2的时候,scale为0.5
  • devicePixelRatio为3的时候,scale为0.33333

这样设好了之后,页面的大小和设计稿上保持一致了,以设计稿为750为例,iphone6的devicePixelRatio为2,所以此时它的布局视口就是750px,我们就可以设定一个基数把页面尺寸转成rem了

var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no')

// 动态计算html的font-size
var baseFontSize = document.documentElement.clientWidth / 10;
document.documentElement.style.fontSize =  baseFontSize + 'px'
// 这样设置后,布局的时候css 的rem计算公式: css尺寸=设计稿标注尺寸/baseFontSize

less 函数转换rem

.px2rem(@name,@px) {
  @{name}: @px / @baseFontSize * 1rem
}

scale的处理

    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下,仍旧使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}

对安卓设备默认按dpr为1处理,而ios设备这样设置后,可以使用布局视口的宽度等于物理的分辨率,这意味着布局视口中的像素单位是和物理像素一一对应的,解决了 1px border 问题和高清图片的问题。另外淘宝的方案将 body 的 width 设为 100% 并对 overflow 进行 hidden,这个 100% width 会计算为布局视口的宽,也是 10rem,那么 body 内布局超出 10rem 的元素不会导致布局视口出现滚动条。

字体处理

字体使用px单位,需要对不同的视口宽度(dpr)的设备适配,flexible是将dpr 数值设置为 html 的 data-dpr 属性,通过css选择器选择不同 dpr 设备下的元素

    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
    font-size: 24px;
}
[data-dpr="3"] div {
    font-size: 36px;
}

less 简写方案

  font-size: @fontSize
  [data-dpr="2"] & {
    font-size: @fontSize * 2;
  }

  [data-dpr="3"] & {
    font-size: @fontSize * 3;
  }
}

【云栖号在线课堂】每天都有产品技术专家分享!
课程地址:https://yqh.aliyun.com/live

立即加入社群,与专家面对面,及时了解课程最新动态!
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK

原文发布时间:2020-04-17
本文作者:前端小闲鱼
本文来自:“掘金”,了解相关信息可以关注“掘金”

网友评论

登录后评论
0/500
评论
云栖号资讯小哥
+ 关注