移动端web开发

移动端web开发

一、移动web开发基础

移动端调试方法

1. Chrome DevTools (谷歌浏览器)的模拟手机调试
2. 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
3. 使用外网服务器，直接IP或域名访问

视口

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

布局视口 layout viewport

• 默认设置，用于解决早期的PC端页面在手机上显示的问题。元素看上去很小，一般默认可以通过手动缩放网页。
  

视觉视口 visual viewport

• 用户正在看到的网站的区域。可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口任然保持原来的宽度。
  

理想视口 ideal viewport

1. 为了使网站在移动端有最理想的浏览和阅读宽度而设定。
2. 理想视口，对设备来讲，是最里理想的视口尺寸。
3. 需要手动添写视口标签通知浏览器操作。
4. 视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局的视口就多宽。

物理像素&物理像素比

• 物理像素点指的是屏幕显示的最小颗粒。
• 物理像素比指的是，一个px中有几个物理像素点。即物理像素点/px值

移动端开发选择

• 单独制作移动端页面（主流）
  • 流式布局（百分比布局）
  • flex弹性布局（强烈推荐）
  • less+rem+媒体查询布局
  • 混合布局
• 响应式页面兼容移动端（其次）
  • 媒体查询
  • bootstrap

CSS初始化 normalize.css

在PC端静态网页开发中，我们使用reset.css来将标签的默认样式取消掉。
在移动端中，CSS初始化推荐使用normalize.css

• 保护了有价值的默认值
• 修复了浏览器的bug
• 是模块化的
• 有详细的文档

设置视口标签以及引入初始化样式

特殊样式

/* CSS3 盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;

/* 点击高亮我们需要清除 设置为transparent完全透明 */
* {
	-webkit-tap-highlight-color: transparent;
}

/* 在移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式 */
input {
	-webkit-appearance: none;
}

/* 禁用长按页面时的弹出菜单 */
img,a {
	-webkit-touch-callout: none;
}

常用初始化样式

/* 给 body 进行样式初始化 */
body {
	min-width: 320px;
	max-width: 540px;
	margin: 0 auto;
	background-color: #fff;
	font-size: 14px;
	line-height: 1.5em;
	font-family: -apply-system,Helvetica,sans-serif;
}

二、流式布局（百分比布局）

通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
注意事项

• 百分比只适用于水平方向的设置

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

• max-width最大宽度（max-height）

• min-width 最小宽度（min-height）

body {
	min-width: 320px;
	max-width: 980px;
}

部分子盒子宽度自适应

• 效果：左右两边的元素宽度固定，中间搜索框的宽度随父盒子的改变而改变
• 方法：让两个固定的元素设定定位absolute，使其脱离标准流。而中间的搜索框保留标准流，自动撑满。

.father {
	position: relative;
	width: 100%;
	height: 44px;
}
.left {
	position: absolute:
	left: 0;
	top: 0;
	width: 40px;
	height: 100%;
}
.center {
	height: 30px;
	margin: 7px 50px;
}
.right {
	position: absolute:
	right: 0;
	top: 0;
	width: 40px;
	height: 100%;
}

渐变背景效果

• 使用线性渐变属性值，linear-gradient, background-image: linear-gradient()
• 阅读MDN文档

图片格式

• dpg图片压缩技术。京东自主研发退出dpg图片压缩技术，该技术可直接节省用户近50%的浏览量，极大的提升了用户的网页打开速度。
• webp图片格式，旨在加快图片的加载速度。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。

三、flex布局

传统布局	flex布局
兼容性好	操作方便，布局极为简单，移动端应用广泛
布局繁琐	PC端浏览器支持情况较差
局限性，不能在移动端很好的布局	IE 11或更低版本，不支持或仅部分支持

建议

1. PC端，传统布局
2. 移动端或不考虑兼容问题的pc端页面布局，flex弹性布局

flex布局原理

• 通过给父盒子设置flex属性，来对子盒子实现排列和布局

• 用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

• 父盒子一旦设置了flex布局后，子元素的float、clear和vertical-align属性将失效

• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

flex布局常见属性

父项常见属性

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

flex-direction

• 设置主轴的方向

属性值	解释说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content

• 主轴上子元素的排列方式

属性值	解释说明
flex-start	从头部开始
flex-end	从尾部开始
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间（重要）

flex-wrap

• 设置子项目是否换行

属性值	解释说明
nowrap	默认值，不换行
wrap	换行

align-items

• 设置侧轴单行子项目对齐
• 控制子项则侧轴（默认y轴）的排列方式

属性值	解释说明
flex-start	默认值，从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（将子元素拉伸，直至与父盒子等高/等宽）

align-content

• 设置侧轴多行子项目对齐
• 设置子项再侧轴上的排列方式，并且只能用于子项出现换行的情况，在单行是没有效果的

属性值	解释说明
flex-start	从侧轴的头部开始排列
flex-end	从侧轴的尾部开始排列
center	在侧轴的中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	子元素高度为父盒子高度

flex-flow

• 是flex-direction和flex-wrap属性的复合属性

flex-flow: row nowrap;

子项常见属性

• flex: 子项目占的份数
• align-self: 控制子项目自己在侧轴的排列方式
• order: 定义子项的排列顺序（前后顺序）

flex属性 重点

• 定义子项目分配父盒子的剩余空间，用flex来表示占多少分数
• 属性值为数字，数字为1，表示占总份数中的1份，默认值为0

align-self

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

order

• 定义子项的排列顺序
• 数值越小，排列越靠前，默认为0
• 注意：和z-index不一样

四、rem适配布局

rem单位

• rem (root em) 是一个相对单位，类似于 em ，em 是父元素字体大小
• rem 的基准是相对于元素的字体大小
• rem 的优势，父元素的字体大小可能各不相同，但是根元素只有一个，可以很好的控制整个页面的元素大小比例

媒体查询

• css3 新语法
• 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
• @media 可以针对不同的屏幕尺寸设置不同的样式
• 在重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、安卓手机，平板等设备都用得到多媒体查询

语法规范

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

@media mediatype and|not|only (media feature) {
CSS-code;
}

/* 具体例子 */
/* 盒子宽度小于640px时，背景颜色为粉色 */
@media screen and (max-width: 640px) {
	div {
		background-color: pink;
	}
}

mediatype 媒体类型

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

值	解释说明
all	所有设备
print	打印机和打印预览
screen	电脑屏幕、平板电脑、智能手机等

关键字

关键字将媒体类型或多媒体特性连接到一起作为媒体查询的条件

• and: &&，与
• not: !，非
• or: |，或
• only: 指定某个特定的媒体类型，可以省略

media feature 媒体特性

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

先了解三个

值	解释说明
width	页面可见区的宽度
max-width	页面最大可见区的宽度
min-width	页面最小可见区的宽度

媒体查询 + rem

不同设备宽度，实现页面元素大小动态改变

媒体查询引入资源（理解）

• 当样式比较繁多时，可以针对不同的媒体使用不同 stylesheet

less 基础

• Less (Learner Style Sheet)
• 在现有的CSS语法上，加入程序式语言的特性
• 引入变量，Mixin（混入），运算以及函数等功能
• Less 是一门CSS的预处理语言，扩展了CSS的动态特性
• 文件后缀名为 .less，在文件当中编写 less 代码

less 变量

• @变量名: 值;

1. 变量命名规范

   • @color: pink;
   • 以@开头
   • 不能包含特殊字符
   • 不能以数字开头
   • 大小写敏感

2. 变量使用规范

   /* 直接使用 */
   body {
   	background-color: @color;
   }
   a:hover {
   	color: @color;
   }
   

less 嵌套

/* 我们常用的选择器 */
.header .logo {
	width: 300px;
}
a:hover {
	color: #eee;
}

/* less嵌套写法 */
.header {
	.logo {
		width: 300px;
	}
}


/* 如果遇见（交集|伪类|伪元素选择器）*/
/* 内层选择器的前面没有 & 符号，则它被解析为父选择器的后代 */
/* 如果有 & 符号，它就被解析为父元素自身或父元素的伪类 */
a {
	&:hover {
		color: #eee;
	}
}

less 运算

• 任何数字、颜色或者变量都可参与运算，加、减、乘、除
• 注意
  1. 参与运算的两个数字，可以一个有单位，一个没有单位，最终单位就是唯一的那个单位
  2. 参与运算的两个数字，都有单位，最终单位取第一个数字的单位
  3. 运算符中间左右有个空格隔开 1px + 5px

rem 适配方案

• 目的

  1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
  2. 使用媒体查询根据不同设备按比例设置 html 的字体大小，然后页面元素使用 rem 做尺寸单位，当 html 字体大小发生变化，元素尺寸也会发生变化，从而达到等比例缩放的适配

• 步骤

  1. 按照设计稿与设备宽度的比例，动态计算并设置 html 跟标签的 font-size 大小；（媒体查询）

  2. CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；

rem 适配方案1

rem + 媒体查询 + less 技术

• 动态设置 html 标签 font-size大小

  1. 假设设计稿是750px，将屏幕划分成15等分

  2. 每一份 html 字体大小，这里就是50px

  3. 那么在320px设备的时候，字体大小为320/15即21.33px

  4. 页面元素大小 / 不同的html字体大小，比例还是相同的

• 元素大小取值方法：页面元素的rem值 = 页面元素px值 / html font-size 字体大小

rem 适配方案2

flexible.js + rem

• flexible.js 是手机淘宝团队出的简洁高效移动端适配库。原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备 html 字体大小即可。
• 里面页面元素的 rem 值 = 页面元素 px 值 / html font-size

五、响应式页面兼容移动端

响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

响应式布局容器

• 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果

• 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式改变

• 平时我们的响应式尺寸划分

  • 超小屏幕 (手机，<768px): 设置宽度为100%
  • 小屏幕 (平板，>=768px): 设置宽度为750px
  • 中等屏幕 (桌面显示屏，>=992px): 970px
  • 大屏幕 (大桌面显示屏，>=1200px): 1170px

Bootstrap 前端开发框架

• bootstrap 优点
  • 标准化的 html + css 编码规范
  • 提供了一套简介、直观、强悍的组件
  • 有自己的生态圈，不断地更新迭代
  • 让开发更简单，提高了开发的效率
• bootstrap 版本
  • 2.x.x: 停止维护，兼容性好，代母不够简洁，功能不完善
  • 3.x.x: 目前使用最多，稳定，但放弃了IE6-IE7.对IE8支持但界面效果不好，偏向于开发响应式布局、移动设备优先的web项目
  • 4.x.x: 最新版，目前还不是很流行
• 创建html骨架结构

Bootstrap 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，它提供了两个作此用处的类

1. container 类
   • 响应式布局的容器 固定宽度
   • 大屏 （大于等于 1200px ）宽度为1170px
   • 中屏 （大于等于 992px ）宽度为970px
   • 小屏 （大于等于 768px ）宽度为750px
   • 超小屏 （100%）
2. container-fluid 类
   • 流式布局容器 百分比宽度
   • 占据全部视口 (viewport) 的容器
   • 适合于制作移动端页面开发

栅格系统

将页面布局划分为等份的列，然后通过列数的定义来模块化页面布局。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口 (viewport) 尺寸的增加，系统会自动分为最多12咧。

栅格选项系数

栅格系统用于通过一系列的 row 与 column 的组合来创建页面布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XWLVBZZw-1612012052062)(C:\Users\黎活宝\AppData\Roaming\Typora\typora-user-images\image-20210127114236874.png)]

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 按照不同屏幕划分为 1~12等份
• 通过“行（row）”在水平方向创建一组“列（column）”，行 (row) 可以去除父容器作用15px的边距
• column 大于12，多余的column所在的元素将被作为一个整体另起一行排列
• 每一列默认有左右15px的padding
• 可以同时为一列指定多个设备的类名，一边划分不同份数 例如 class=“col-md-4 col-sm-6”

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距 margin。

	
1
	
	
2

列排序

通过使用 .col-md-push-* 往右推和 .col-md-pull-* 往左拉 这两个类就可以很容易的改变列排序

	
	
左侧
	
	
右侧

响应式工具

为加快移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备显示或隐藏页面内容

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏
.hidden-sm		隐藏
.hidden-md			隐藏
.hidden-lg				隐藏

与之相反，visible-xs、visible-sm、visible-md、visible-lg 对应的设备可见

文章来源：拉勾教育大前端就业急训营