04-移动端开发及布局

目录

1. 了解移动端开发

1.1 移动端开发历史

1.2 移动平台分类

1.3 移动端调试方法

1.4 移动开发有哪些方式

1.4.1 Native App：本地应用程序（原生App）

1.4.2 Web App：网页应用程序（移动web）

1.4.3 Hybrid App：混合应用程序（混合App）

2. 移动端核心

2.1 布局视口、视觉视口、理想视口

2.1.1 布局视口(layout viewport)

2.1.2 视觉视口(visual viewport)

2.1.3 理想视口(ideal viewport)

2.2 移动端设备

2.2.1 屏幕尺寸

2.2.2 物理像素和物理像素比

2.2.3 设备像素比(DPR)

2.2.4 像素为什么会有“物理”和“逻辑”之分，它们之间什么区别？

2.3 二倍图(三倍图)应用知识总结

2.4 移动端布局

2.4.1 移动端布局方式选择

2.4.2 rem单位(重点)

设计方案

---

1. 了解移动端开发

1.1 移动端开发历史

开篇之前我们先简略的讲一下移动手机的发展历史。

1. 1902年，一个叫做“内森·斯塔布菲尔德”的美国人在肯塔基州默里的乡下住宅内制成了第一个无线电话装置，这部可无线移动通讯的电话就是人类对“手机”技术最早的探索研究。

对手机最早的探索者——内森·斯塔布菲尔德

2.1938年，美国贝尔实验室为美国军方制成了世界上第一部“移动电话”手机。

3.1983年，世界上第一台移动电话终于问世——摩托罗拉DynaTAC8000X（大哥大），是世界上首部获得美国联邦通讯委员会（FCC）认可并正式投入商用的蜂窝式移动电话。这部手机在1983年首次将贝尔实验室1947年提出的移动电话概念和70年代提出的蜂窝组网技术概念变为了现实。这个移动通讯业界的第一奠定了摩托罗拉手机部门在移动通讯业界20余年不可动摇的地位。

4.1999年，第一部智能手机 摩托罗拉天拓A6188

这款A6188采用了摩托罗拉公司自主研发的龙珠（Dragon ball EZ）16MHzCPU，支持WAP1.1无线上网，采用了PPSM（Personal Portable Systems Manager）操作系统。A6188一经推出，便成为了高端商务人士的首选，至今我们还能偶尔看到这款开辟一个时代的传奇手机。同时，这款手机也是全球第一部具有触摸屏的手机，它同时也是第一部中文手写识别输入的手机。

5.2007年，iphone出世，触屏+应用引爆智能机新时代。

6.2008年，首部Android手机，由HTC制造，型号为HTC G1。

2003年10月，Andy Rubin等人创建Android公司，并组建Android团队。

2005年8月17日，Google低调收购了成立仅22个月的高科技企业Android及其团队。安迪鲁宾成为Google公司工程部副总裁，继续负责Android项目。

1.2 移动平台分类

• 苹果ios

• 安卓Android

• 黑莓BlackBerry

• 塞班系统belle

• 鸿蒙HarmonyOS

1.3 移动端调试方法

• 浏览器的模拟手机调试

• 搭建本地web服务器，手机和服务器在一个局域网捏，通过手机访问服务器

• 使用外网服务器，直接IP或域名访问

1.4 移动开发有哪些方式

1. Native App：本地应用程序（原生App）

2. Web App：网页应用程序（移动web）

3. Hybrid App：混合应用程序（混合App）

1.4.1 Native App：本地应用程序（原生App）

原生应用开发，是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发。比如android是利用java、eclipse、Android studio，IOS是利用Objective-C 和Xcode进行开发。原生应用由于利用的是官方提供的语言和工具并且能够直接操控硬件设备（比如多点触控、NFC、读取短信等），在应用性能上和交互体验上应该是最好的，但是原生应用的可移植性比较差，特别是一款原生的App，Android和IOS都要各自开发，同样的逻辑、界面要写两套。

1.4.2 Web App：网页应用程序（移动web）

HTML5应用开发，是利用Web技术进行的App开发，我们知道web技术本身需要浏览器的支持才能进行展示和用户交互。主要用到的技术是HTML5、JavaScript、CSS等。H5开发的好处是可以跨平台，编写的代码可以同时在Android、IOS、Windows上进行运行。现在还可以利用uniapp,进行更多平台的支持。由于Web技术本身的限制，H5移动应用不能直接访问设备硬件和离线存储，所以在体验和性能上有很大的局限性。

1.4.3 Hybrid App：混合应用程序（混合App）

混合应用开发正是结合原生和H5开发的技术，取长补短的一种开发模式，原生代码部分利用WebView插件或者其它的框架为H5提供了一个容器，程序主要的业务实现、界面展示是利用H5相关的Web技术进行实现的。比如现在的京东、淘宝、今日头条等都是利用的混合开发模式。

混合开发的优缺点：

优点是：

1、开发效率高，节约时间同一套代码Android和IOS基本都可用

2、更新和部署比较方便，不需要每次升级都要上传到App Store进行审核了，只需要在服务器端升级就可以

3、代码维护方便、版本更新快，降低产品成本

缺点是：

1、由于不能直接操控硬件有些方面性能不是很好

2、另外有技术比较新版本的兼容性比较差，还有就是即懂原生开发又懂H5开发的高端人才难找。

2. 移动端核心

2.1 布局视口、视觉视口、理想视口

2.1.1 布局视口(layout viewport)

• layout viewport(布局视口)：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。

  

• js获取布局视口：document.documentElement.clientWidth | document.body.clientWidth；

  

  当网页的宽度大于以上的值时，就会出现横向滚动条。

2.1.2 视觉视口(visual viewport)

• visual viewport(视觉视口)：用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。

  

• js获取视觉视口：window.innerWidth；

2.1.3 理想视口(ideal viewport)

• 布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。

  

• js获取理想视口：window.screen.width；

• 用户刚进入页面时不再需要缩放。这就是为什么苹果和其他效仿苹果的浏览器厂商会引进理想视口！

  只有是专门为移动设备开发的网站，他才有理想视口这一说。而且只有当你在页面中加入viewport的meta标签，理想视口才会生效。

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

标准的viewport参数设置

• width=device-width：视口宽度和设备保持一直

• initial-scale=1.0：表示初始的缩放比例1.0；

• user-scalable=no：不允许用户进行缩放；

注意:

• 开发中,用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口。

• 当只设置width属性值，而不指定initial-scale属性值时，大多数浏览器会自动缩放。

• 属性值设置为width=device-width, initial-scale=1就不仅能够将页面的布局视口自动设置为各个移动设备的理想视口，还能够同时兼容iphone、ipad的Safari以及WP7 IE浏览器的横屏问题。

2.2 移动端设备

2.2.1 屏幕尺寸

　　指屏幕对角线的长度，单位是英寸，1英寸=2.54cm

2.2.2 物理像素和物理像素比

• 物理像素点是指屏幕显示的最小颗粒，是物理真实存在的，是厂商在出厂的时候就设置好了的。

• 物理像素比：一个px能显示的物理像素点个数

2.2.3 设备像素比(DPR)

设备像素比（Device Pixel Ratio, DPR），一个设备的物理像素与逻辑像素之比。

DPR = 物理像素 / CSS像素

2.2.4 像素为什么会有“物理”和“逻辑”之分，它们之间什么区别？

其实在很久以前，的确是没区别的，CSS里写个 1px ，屏幕就给你渲染成1个实际的像素点，DPR=1，多么简单自然~

后来苹果公司为其产品mac、iPhone以及iPad的屏幕配置了Retina高清屏，也就是说这种屏幕拥有的物理像素点数比非高清屏多4倍甚至更多。如果还按照DPR=1进行展示，那么同一张图片在高清屏上面显示的区域面积会是非高清屏的1/4，这样的话由于图片在屏幕上的展示面积大大缩小，也会导致出现“看不清”的问题。

举个例子，iPhone 6的物理像素上面已经说了，是 750 * 1334，那它的逻辑像素呢？我们只需在 iPhone 6 的Safari里打印一下 screen.width 和 screen.height 就知道了，结果是 375 * 667，这就是它的逻辑像素，据此很容易计算出 DRP为2。

从以上现象得出的结论是：

UI设计师按照手机物理像素出设计稿，切图时根据其设备像素比来换算设备独立像素（CSS像素），比如视网膜手机iPhone6，物理像素 750px×1334px，由于其设备像素比为2，CSS切图时需要将设计稿的所有尺寸除以2，才是正确CSS像素值。

2.3 二倍图(三倍图)应用知识总结

• lRetina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了。

• CSS像素 = 逻辑像素

• 对于一张60px * 60px 的图片,在手机打开，按照物理像素比会放大倍数，这样会造成图片模糊。

• 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题,通常使用二倍图或三倍图。

  总结:也就是说要显示宽度为30px*18px（CSS像素）的照片，在DPR为2的情况下，对应的图片需要为60px*36px；DPR为3的情况下，对应的图片需要为90px*54px；基于此种情况，移动端的图片一般需要设计2套，以适应不同的像素比。

2.4 移动端布局

2.4.1 移动端布局方式选择

1. 流式布局（百分比布局）

   • 流式布局，就是百分比布局，也称非固定像素布局。

   • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

   • 流式布局方式是移动web开发使用的比较常见的布局方式。

2. flex 弹性布局（强烈推荐）

3. less+rem+媒体查询布局

响应式

1. 媒体查询

2. bootstarp

2.4.2 rem单位(重点)

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

/* 根元素html为10px */
html {
   font-size: 10px;
}
/* .box的宽度大小为200px */       
.box {
    width: 20rem;
}

rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

设计方案

• 页面元素的rem值 = 页面元素值（px） / html font-size 字体大小,

  当前设计稿是 750px，假如我们把 html 文字大小设置为10px,

  里面页面元素rem值： 页面元素的px 值 / 10,

  VSCode中有px 转换rem的安装插件 cssrem,然后按照需要修改插件的默认大小16,转换为10(根据自己需要)