一、移动端适配

提起移动端适配,有基础的肯定可以想到是remflexible.js,本文要说的是 vw + rem

vw 是什么?

vw 是基于视图(Viewport)的长度单位,而与Viewport相关四个单位有:

vw:Viewport’s Width 简写,1vw 等于 window.innerWidth 的 1%

vh: Viewport’s Height 简写,1vh 等于 window.innerHeight 的 1%

vmin:当前 vw 和 vh 中较小值

vmax:当前 vw 和 vh 中较大值

 

 

常规的 rem 的适配方案(包括flexible),其实就是通过 js 动态计算,模拟 vw 的效果。

 

过去使用这种方案主要原因是 vw 存在一定的兼容问题,不过对于现在而言,vw 也基本能满足对兼容性的要求。

 

1、设置 html font-size 为 10vw

html {    font-size: 10vw;}

 

2、以750UI图为例,在 css 中,直接使用UI图上的长度值,单位设置为 px

.head {    width: 750px;}

 

3、引入 postcss-pxtorem 插件,配置如下:

require('postcss-pxtorem')({    rootValue: 75,    unitPrecision: 5,    propList: ['*'],    selectorBlackList: [],    replace: true,    mediaQuery: false,    minPixelValue: 0})

以上,就可以使用了 vw + rem 方案实现了移动端适配

 

4、引入 viewport-units-polyfill 解决兼容问题

为了保证在低版本的机型也能正常显示页面,可以引入 viewport-units-polyfill 来处理 vw 的兼容问题。

viewport-units-polyfill 其实是 viewport-units-buggyfill 的简化版。

简单介绍下 viewport-units-buggyfill 的实现思路:通过引入一段js,对于存在兼容问题的版本,遍历页面中所有的css,找到用到Viewport单位的css,将Viewport单位计算为 px 单位,并将新的css规则插到head或body中。

viewport-units-polyfill 则是在 viewport-units-buggyfill 基础上做了些修改,主要是把大量的遍历工作去掉,只针对 html font-size 做兼容处理(此适配方案只在 html font-size 中使用到vw)。去掉遍历工作,大大优化了性能。

用法:直接将此 js 脚本放在页面的 head 中即可

二、1px border

使用 vw + rem 的适配方案基础上,使用视图缩放(Viewport scale)来解决 1px border 问题

(function () {    var dpr = window.devicePixelRatio;    var scale = 1 / dpr;     var metaEl = document.querySelector('meta[name="viewport"]') || document.createElement('meta');    metaEl.setAttribute('name', 'viewport');    metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, viewport-fit=cover');     if (document.documentElement.firstElementChild) {        document.documentElement.firstElementChild.appendChild(metaEl);    } else {        var wrap = document.createElement('div');        wrap.appendChild(metaEl);        document.write(wrap.innerHTML);    }})();

思路很简单,就是讲视图缩放(Viewport scale)设置为 1/dpr(设备像素比),从而解决 1px border 的问题。

三、基础移动布局

基础布局其实涵盖很多方面,如:

页面整体布局

文案与icon

  • 各种居中对齐(垂直、水平)
  • 文案与icon对齐(icon应该使用iconfont而不是图片)
  • z-index 分层

 

1、页面整体布局

H5页面比较常见的布局是页面分为三部分:head、body、foot,其中head、foot会有吸顶、吸底的效果,常规的使用 fixed布局 会存在些问题,推荐将页面整体使用flex布局,将head、foot固定,body可滚动。

如下:

<div id="page">    <div id="hd">        <!-- head -->    </div>    <div id="bd">        <!-- body -->    </div>    <div id="ft">        <!-- foot -->    </div></div>
#page {    display: flex;    flex-direction: column;    position: relative;    height: 100%;    overflow: hidden;}#hd {    z-index: 999;}#bd {    flex-grow: 1;    overflow-y: scroll;    -webkit-overflow-scrolling: touch;    &::-webkit-scrollbar {        display: none;    }}

注意:此布局在输入框的页面,当键盘弹起时,Android上会存在键盘遮掉比较靠底的输入框,所以在有表单的页面,并不推荐此布局,而是使用常规布局

 

2、文案和icon

文案与icon对齐

<div class="box">    <span>文案与icon垂直居中,水平对齐</span>    <span class="icon-span">        <i class="icons"></i>    </span></div>
 
.box {    height: 92px;    font-size: 32px;    line-height: 1;    padding: 0 20px;    display: flex;    align-items: center;    .icon-span {        font-size: 24px;        line-height: 1;        .icons {            color: red;            margin-left: 8px;        }    }}

 

3、z-index 分层

规范 z-index 的使用,防止因滥用导致在页面展示问题,分层使用:

$z-layers: (     'below': -1,    'default': 1,    'content': (        'base': 100    ),    'fixed': 990,    'mask': 1000,    'modal': 1020,    'toast': 1040);

 

为了方便使用,使用以下 scss 方法:

$z-layers: (     'below': -1,    'default': 1,    'content': (        'base': 100    ),    'fixed': 990,    'mask': 1000,    'modal': 1020,    'toast': 1040);@function map-has-nested-keys($map, $keys...) {    @each $key in $keys {        @if not map-has-key($map, $key) {            @return false;        }        $map: map-get($map, $key);    }    @return true;} @function map-deep-get($map, $keys...) {    @each $key in $keys {        $map: map-get($map, $key);    }    @return $map;} @function z($layers...) {    @if not map-has-nested-keys($z-layers, $layers...) {        @warn "No layer found for `#{inspect($layers...)}` in $z-layers map. Property omitted.";    }    @return map-deep-get($z-layers, $layers...);}

具体使用如下:

.head {z-index: z('fixed');} 

本篇文章来源于微信公众号: 印象IT

印象资源网- 版权声明©
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长进行删除!
2. 本站提供教程视频、源码、模板、插件等等其他资源,需要技术服务可以联系管理员。
3. 如有链接无法下载、失效或广告,请联系管理员处理!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需,请大家谅解,谢谢。
5.联系客服邮箱(1):810023272@qq.com
联系客服邮箱(2):578561952@qq.com
6.联系客服QQ:点击我和交流
印象资源网 » 聊聊web移动端布局几个话题

发表评论

提供最优质的资源集合

了解详情