移动端web开发
移动端web开发
一、移动web开发基础
移动端调试方法
- Chrome DevTools (谷歌浏览器)的模拟手机调试
- 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
- 使用外网服务器，直接IP或域名访问
视口
- 视口 viewport 就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。
布局视口 layout viewport
- 默认设置，用于解决早期的PC端页面在手机上显示的问题。元素看上去很小，一般默认可以通过手动缩放网页。
视觉视口 visual viewport
- 用户正在看到的网站的区域。可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口任然保持原来的宽度。
理想视口 ideal viewport
- 为了使网站在移动端有最理想的浏览和阅读宽度而设定。
- 理想视口，对设备来讲，是最里理想的视口尺寸。
- 需要手动添写视口标签通知浏览器操作。
- 视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局的视口就多宽。
物理像素&物理像素比
- 物理像素点指的是屏幕显示的最小颗粒。
- 物理像素比指的是，一个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或更低版本，不支持或仅部分支持 |
建议
- PC端，传统布局
- 移动端或不考虑兼容问题的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 | 所有设备 |
| 打印机和打印预览 | |
| 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 变量
- @变量名: 值;
-
变量命名规范
- @color: pink;
- 以@开头
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
-
变量使用规范
/* 直接使用 */ 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 运算
- 任何数字、颜色或者变量都可参与运算，加、减、乘、除
- 注意
- 参与运算的两个数字，可以一个有单位，一个没有单位，最终单位就是唯一的那个单位
- 参与运算的两个数字，都有单位，最终单位取第一个数字的单位
- 运算符中间左右有个空格隔开 1px + 5px
rem 适配方案
-
目的
- 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
- 使用媒体查询根据不同设备按比例设置 html 的字体大小，然后页面元素使用 rem 做尺寸单位，当 html 字体大小发生变化，元素尺寸也会发生变化，从而达到等比例缩放的适配
-
步骤
-
按照设计稿与设备宽度的比例，动态计算并设置 html 跟标签的 font-size 大小；（媒体查询）
-
CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；
-
rem 适配方案1
rem + 媒体查询 + less 技术
-
动态设置 html 标签 font-size大小
-
假设设计稿是750px，将屏幕划分成15等分
-
每一份 html 字体大小，这里就是50px
-
那么在320px设备的时候，字体大小为320/15即21.33px
-
页面元素大小 / 不同的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 容器，它提供了两个作此用处的类
- container 类
- 响应式布局的容器 固定宽度
- 大屏 （大于等于 1200px ）宽度为1170px
- 中屏 （大于等于 992px ）宽度为970px
- 小屏 （大于等于 768px ）宽度为750px
- 超小屏 （100%）
- 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 对应的设备可见
文章来源：拉勾教育大前端就业急训营