第五篇：移动端开发

时间：2023-05-31 06:39:02 | 来源：网站运营

时间：2023-05-31 06:39:02 来源：网站运营

移动端浏览器

• 国内的uc和qq，百度等手机浏览器都是基于webkit修改的内核，国内尚无自主研发的内核
• 正常兼容移动端主流浏览器处理webkit内核即可

手机屏幕现状

• 移动端设备的尺寸非常多，碎片化严重
• 安卓的设备有很多种分辨率，还有2k、4k的屏幕
• 苹果手机不同的型号也是不同的尺寸跟分辨率
• 作为开发者通常不需要关注这些分辨率，我们常用的尺寸就是px

视口

• 视口就是浏览器显示页面内容的屏幕区域，视口分为布局视口、视觉视口、和理想视口

布局视口 layout viewport

• 一般移动端设备的浏览器都默认了一个布局视口，用于解决早期pc端页面在手机端显示的问题
• ios、安卓基本都将这个视口分辨率设置为980px，所以pc上网页大多都能在手机上展示，不过页面元素看上去很小，一般默认可以通过手动缩放网页

视觉视口 visual viewport

• 字面意思，它是用户正在看到的的网站区域
• 我们可以通过缩放去操作视口，但不会影响布局视口，布局视口人保持原来的宽度

理想视口 ideal viewport

• 为了是网站在移动端有最理想的浏览和阅读宽度二设定
• 理想视口，对设备来说是最理想的视口尺寸
• 需要手动添加meta视口标签通知浏览器操作
• meta视口标签的主要目的有：布局视口的宽度应该与理想视口的宽度一致，简单的理解就是设备多款我们的布局视口就有多宽

mete视口标签

标准的viewport参数设置

• 视口的宽度与设备的宽度一致
• 视口默认的缩放比为1.0
• 不允许用户自行缩放
• 最大允许缩放比1.0
• 最小允许缩放比1.0

物理像素与物理像素比

• 物理像素点是指平布显示的最小粒度，是物理真是存在的。在是在厂商处长时就设置好了的。
• 我们开发的时候1px不一定等于1个物理像素
• pc端的1px等于一个物理像素，但是移动端就不一定
• 一个px的能显示的物理像素点的个数，称为物理像素比，或者屏幕像素比
• pc单和早期的手机1css像素=1物理像素
• retina（视网膜屏幕）是一种显示技术，可以吧更多的物理像素点压缩到一块屏幕里
• 从而达到更好的分辨率，并提升屏幕的细腻程度

多倍图

• 对于一张50px*50px的图片在retina屏幕中打开，按照刚才的物理像素会方法，会造成视觉模糊
• 在标准的viewport设置中，使用高倍图来提高图片的质量
• 通常情况下使用二倍图，偶尔会有3倍或者4被图，这个根据实际情况
• 在背景图的情况下要注意缩放

移动端主要的方案

• 单独制作移动端页面-主流，目前国内几乎所有的移动端都是单独制作。通常情况下，在网址域名前面在上m可以打开移动端。可以判断设备，如果是移动端设备则跳转移动端页面
• 响应式兼容移动端-非主流。开发工作量太大且不容易维护，不推荐使用

浏览器

• 国内移动端浏览器基本以webkit为主，隐藏我们就考虑webkit的兼容
• webkit内核的环境下我们可以放心的使用h5及c3的新特性
• 同时我们浏览器的私有浅醉我们只需要加上-webkit-即可
• css初始化移动端通常会选择使用normalize.css

盒子模型

• 传统盒子模型
• 变异盒子模型
• 移动端布局时通常会选用变异盒子模型

特殊样式处理

• 注意当前浏览器版本已经不需要再处理这些问题，如果出现可以选择加上

流式布局

• 流式布局又称百分布局，也称非固定像素布局
• 可以通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充
• 流式布局的方式是移动端比较常见的一种布局方式

注意事项

• 制作过程中，需要定义页面的最大和最小支持宽度
• max-width：最大宽度
• min-width：最小宽度

常用初始化样式

flex布局

• 操作方便，布局简单，移动端使用广泛
• pc端浏览器支持较差
• 移动端布局时建议使用flex布局

flex布局原理

• flex是flexible box的简写，意思为弹性盒子，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局
• 当我们为父盒子设置flex后，子元素的float，clear，vertical-align属性会失效
• 采用flex布局的元素，称为flex容器，他的所有子元素自动成为容器成员，简称项目
• flex布局原理就是通过给父盒子添加flex属性，用来控制子盒子的位置和排列方式

flex布局父元素常见的属性

• flex-direction：设置主轴的方向
• justify-content：设置主轴上子元素排列的方式
• flex-wrap：设置子元素是否换行
• align-conten：设置侧轴上子元素的排列方式（多行）
• align-items：设置侧轴上子元素的排列方式（单行）
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction

• 在flex布局中，是分为主轴和侧轴两个方向
• 默认主轴方向就是x轴方向，水平向右。侧轴是y轴方向默认垂直向下
• flex-direction的属性决定主轴的方向
• 主轴和侧轴是发生变化的，子元素是根据主轴来排列的

justify-content

• 定义了项目在主轴上的对齐方式
• 使用这个属性前要确定好主轴是哪一个

flex-wrap

• 默认情况下，项目都排在一条线上
• 定义项目是否换行

align-items

• 控制子项在侧轴的排列方式
• 在子项为单行的时候使用

align-content

• 设置子项在侧轴的排列方式，当行下无效

flex-flow

• 复合属性，相当于同时设置了flex-direction和flex-wrap
• flex-flow：row nowrap

flex布局子项常见属性

• flex子项占的分数
• align-self 控制子项自己在侧轴的排列方式
• order 定义指向的排列顺序

flex

• flex属性定义子项分配父元素剩余的空间，flex表示占有多少份
• 属性为数字表示占总额的多少份。默认为0

align-self

• 允许单个项目有与其他项目不同的对齐方式，可以覆盖align-items 属性
• 默认值为auto，表示集成父元素的align-items 属性，如果没有父元素等同于strech

order

• 数值越小，排列越靠前

rem适配布局

• rem是一个相对的单位，类似于em，em是父元素字体的大小
• rem是基于html元素的字体大小
• 优势：父元素文字大小不可能一直，但是整个页面只有html，可以很好的来控制整个页面的元素大小比

媒体查询

• 媒体查询是css3的新语法
• 使用@media查询可以针对不同的媒体类型定义不同的样式
• @media可以针对不同的屏幕尺寸设置不同的样式
• 当你浏览器重置大小的过程中，页面也会根据浏览器的宽高重新渲染页面

语法规范

• 使用@media开头
• mediatype 媒体类型
• 关键字 and not only
• media feature 媒体特性必须有小括号包含

媒体类型

• mediatype，将不同的终端设备划分成不同的类型，称为媒体查询

关键字

• and：可以将多个媒体特性链接到一起
• not：排除某个媒体类型
• or：可以测试多个媒体查询条件
• only：指定某一个特定的媒体类型

媒体特性

• 每种媒体类型都有不同的特性，根据不同的媒体类型的媒体特性设置不同的展示风格

rem适配方案技术使用

• 媒体查询+rem
• flexble+rem（推荐）

flexble

• 手机淘宝团队退出的移动端适配库
• 它的原理是将当前的设备划分为10份，但是再不同的设备下比例还是一致的
• 我们要做的就是确定要当前设备html字体的大小就可以了
• 比如当前设计是750px，我们只需要把html的字体大小设置为75px就可以，里面元素的rem的值：元素的px/75
• 剩余的可以让flexble.js去计算

viewport布局

css3中新的视口单位

• vw：1vw等于视口宽度的百分之1
• vh：1vh等于视口高度的百分之1
• vmin：选取vw和vh中最小的那个
• vmax：选取vw和vh中最大的那个

兼容性

• 在移动端 iOS 8 以上以及 Android 4.4 以上获得支持
• 且在微信 x5 内核中也得到完美的全面支持

备注

• viewport布局会在后续css预编译less及sass介绍完成后介绍整体的方案