记一次前端技术分享（移动端相关概念讲解）

2018-09-29  本文已影响55人  taomas

移动端开发中的相关概念讲解

1、移动端自适配方案

移动端如何根据不同手机尺寸进行页面的适配

rem 自适应和 vw 自适应

rem 自适配

定义：相对单位，相对于根元素 html 的 font-size 大小
rem 是相对于 html 标签的 font-size 所设定的相对大小的一个相对单位，比如 html 的 font-size 为 750px，则 1rem 在设备上表现为 750px

通用方案：阿里巴巴的 Flexible 方案，html 的 font-size 大小等于页面宽度 10%，相当于把页面等于 10 个 rem

简单方案:头部嵌入一段 script，根据页面宽度改变根元素 html 的 font-size 大小，页面元素的单位用 rem，相当于元素是相对于根元素的 font-size 大小进行自适应变化

;(function(doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      // viewport的宽度
      var clientWidth = docEl.clientWidth
      if (!clientWidth) return
      if (clientWidth >= 750) {
        docEl.style.fontSize = '75px'
      } else {
        docEl.style.fontSize = 75 * (clientWidth / 750) + 'px'
      }
    }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
如何将设计师的设计稿单位 px 转成 rem

例如，设计稿宽度是 750px，当设备宽度为 750px 时，1 个 rem 就是 75px，一个页面的宽度也就是 10 个 rem,px 转 rem 公式为：宽度（px）/rem 基准值（75）,若用 sass 语法，可以写个 function 进行 rem 转换，也可直接用 postcss 插件：px2rem 来转换

vw 自适配

定义：相对于 viewport 窗口的宽度的大小的 1/100
1vw 就代表 1%宽度的 viewport 的宽度，100vw 代表 1 个 viewport 的宽度

使用 vw 做 css 单位，可以不用动态计算 html 元素的 font-size 大小，页面能根据不同宽度手机做自适应

如何将设计师的设计稿单位 px 转成 vw

例如，设计稿宽度是 750px，当设备宽度为 750px 时，1 个 vw 就是 7.5px,一个页面宽度就是 100vw
同理，计算公式：宽度（px）/ vw基准值（7.5）
也可以用 postcss 插件（postcss-px-to-viewport）进行计算

vw 对于浏览器兼容性不是很好

vw 兼容方案：https://www.w3cplus.com/css/vw-for-layout.html

类似的相对单位

em：相对于父元素 font-size 的大小

vh: 相对于 viewport 视口的高度的大小的 1/100

vmin: 相对于 viewport 视口宽度或高度较小值的 1/100

vmax：相对于 viewport 视口宽度或高度较大值的 1/100

vmin 和 vmax 单位是相对于 viewport 视口宽度或高度较大或者较小值的 1/100，也就是说不论横屏或者视频，这两个单位的相对值始终不会变化
用处：当我们不希望横屏或竖屏改变元素的宽高时，可以用着两个单位

2、浏览器内核

webview 上不同系统的渲染引擎有什么区别？

主流：ios 使用的 webkit，安卓使用的 blink

大概在 05 年左右苹果开发了 webkit 浏览器内核，浏览器主流内核就是 webkit，后面安卓也采用 webkit 浏览器内核。由于 webkit 初始架构比较简单，apple 基于原本的 webkit 开发了 webkit2，google 则根据 webkit 内核移植出新的浏览器内核 blink（chrome 版本 28 及往后使用该内核），Opera 后期也追随 google 用上了 blink 渲染引擎

为什么会有浏览器前缀

由于不同的浏览器会使用不同的内核，最初不同的内核对 css3 样式的兼容性不一样，所以存在不同浏览器前缀

为兼容不同浏览器，使用autoprefixer插件，可自动添加浏览器前缀(ios8 出现 flex 布局不支持)

"browserslist": [
  "> 1%",
  "last 2 versions",
  "Android >= 3.2",
  "Firefox >= 20",
  "iOS 7"
]

webkit 内核大致结构：


webkit

相关链接：

v8 引擎介绍：https://blog.csdn.net/swimming_in_it_/article/details/78869549

webkit 内核介绍：https://blog.csdn.net/offbye/article/details/40039289

3、viewport 的概念

viewport: 手机端浏览器的可视窗口大小,用来控制根元素容器的宽高，也就是整个浏览器的宽高，不能够被 css 修改，相当于 html 的一个父元素

相关概念：移动设备有三个 viewport，布局窗口、视觉窗口、理想窗口

布局窗口:可供页面布局的大小


布局窗口和视觉窗口

视觉窗口：在手机端上展示的大小

理想窗口：就等于设备屏幕的大小，也就是视觉窗口的大小

移动端开发常用 meta 标签来初始化 viewport 的缩放比，让布局窗口和视觉窗口保持一致

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

相关链接：http://www.w3cplus.com/css/viewports.html

4、iphone 的 retina 屏上 1px 问题

解决方法：
直接针对 dpr 来设置，1/dpr 个像素，比如 dpr 为 2 则设置为 0.5px，或新增一个 1px 宽度的伪类，使用 transform 属性缩小到 0.5 倍宽度
直接将 meta 头标签，设置初始宽度为 1/dpr 倍物理像素，比如 dpr 为 2，则设置为：

<meta name="viewport" content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">

此时页面相当于缩放到了原来 0.5 倍，但是 rem 是相对单位，所有页面布局和样式会整体自适应，同时此刻 1px 也对应 1 个物理像素

关于背景图或者相关的 icon，设计师一般也会提供 2 倍图甚至是 3 倍图，也是这个原因，可根据媒体查询到对应 dpr 是选择几倍图

相关文章：https://www.cnblogs.com/surfaces/p/5158582.html

5、媒体查询

目的：据页面的特定宽度来定义特殊的 CSS 规则（这里的宽度也是视口宽度（viewport））

/*
标示：@media
关键字: not only
设备类型：all、print、screen、speech
打印机:print
电脑或手机显示器:screen
阅读器: speech
且: and
或: ,
*/

/* 页面最大宽度为400px */
@media all and (max-width: 400px) {
  div {
    width: 300px;
  }
}

/* 指定显示器类型，页面最大宽度为400px且最小宽度为200px */
@media only screen and (max-width: 400px) and (min-width: 200px) {
  div {
    width: 300px;
  }
}

/* 排除显示器类型，页面最大宽度为400px且最小宽度为200px,或者dpr为2 */
@media not screen and (max-width: 400px) and (min-width: 200px),
  (-webkit-device-pixel-ratio: 2) {
  div {
    width: 300px;
  }
}

6、通过 js 获取相关的宽高属性

7、iphonx 适配

设备安全区域

由于 iPhone X 的顶部和底部状态栏，以及全面屏的普及，会导致全屏的页面，四个圆角以及底部、顶部被遮住，因此需要根据 iPhone X 做一些适配
iOS 11 为屏幕适配引入了一个十分重要的概念：Safe Area。

适配方案：
1、将 viewport-fit 通过 meta 标签设置为 cover，表示页面内容填充屏幕

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

2、使用 css 的 constant()函数做适配
如果页面只是简单的流式布局
ios11 之前使用的是 constant 做适配，ios11 之后使用标准的 env 做适配

body {
  padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
  padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
  padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34px
  padding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  padding-left: env(safe-area-inset-left); //如果未竖屏时为0
  padding-right: env(safe-area-inset-right); //如果未竖屏时为0
  padding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高度 34px
}

3、针对特殊情况单独处理

/*iPhoneX 的适配*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .iphonex-padding-bottom {
    padding-bottom: constant(safe-area-inset-bottom) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

参考文档：https://www.cnblogs.com/lolDragon/p/7795174.html

8、使用 vue 的 异步组件处理加载状态

为减少手机端的首屏渲染时间，一般使用 vue-router 懒加载方案，但页面跳转首次访问会有卡顿现象

可在页面跳转中间加一层 loading 组件，此时可以使用 vue 的异步组件方案来处理

文档地址：https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%A4%84%E7%90%86%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81

// route.js
import loadable from 'loadable.js'
const routes = [
  {
    path: '/loan-home',
    name: 'LoanHome',
    component: loadable(() => import('@/pages/xxx'))
  }
]

// loadable
export default asyncComponent => {
  const component = () => ({
    component: asyncComponent(),
    loading: LoadingComponent,
    delay: 0
  })
  return {
    render(h) {
      return h(component, {})
    }
  }
}

参考文档

上一篇 下一篇

猜你喜欢

热点阅读