Part 1 · HTML5-04-移动端网页开发
时间：2023-09-27 19:18:01 | 来源：网站运营
时间：2023-09-27 19:18:01 来源：网站运营
Part 1 · HTML5-04-移动端网页开发：
Part 1 · HTML5 网页开发-04
第四章、移动端网页应用开发及项目
第一节、移动端开发基础
1、移动web开发基础
- 常见的PC端浏览器（谷歌、360、火狐、搜狗、IE浏览器、百度等）
注意 ：当用H5或CSS3的时候，基本不考虑低版本浏览器的兼容性问题了 - 常见的移动端浏览器（UC浏览器、QQ浏览器、百度手机浏览器、搜狗手机浏览器等
注意 : 国内的UC和QQ、百度等手机浏览器都是根据Webkit修改过来的内核，国内还没有自主研发的内核
（移动端访问网址，网址前加个m，比如：m.jd.com 、m.taobao.com）
总结：兼容移动端主流浏览器，处理Webkit内核浏览器就可以了 - 常见的移动端屏幕尺寸 ， 可以参考 ：
移动端调试方法：- 谷歌浏览器的模拟手机调试
- 搭建本地web服务器，手机和服务器在一个局域网捏，通过手机访问服务器
- 使用外网服务器，直接IP或域名访问
移动端浏览器主要对webkit内核进行兼容
（移动端碎片化比较严重，分辨率和屏幕尺寸大小不一，开发只需要在意开发尺寸就好）
2、视口
- 视口（viewport）就是浏览器显示页面内容的屏幕区域
- 布局视口（layput viewport）
- 视觉视口（visual viewport）
- 理想视口（ideal viewport）对于设备来说，是最理想的视口尺寸，需要手动添加
<meta>标签
<meta>视口标签的主要目的：布局视口宽度应该与理想视口宽度一致，设备有多宽，布局视口就有多宽
<meta>标签| 属性 | 解释 |
|---|
| width | 宽度设置的是viewport的宽度，可以设置device-width特殊值 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比,大于0 的数字 |
| user-scalable | 用户是否可以缩放（yes或no,0或1） |
写法：<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=0,minimun-scale=1.0,maximun-scale=1.0">标准的viewport参数设置- 视口宽度和设备保持一致
- 不允许用户自行缩放
- 视口的默认最小缩放比例为1.0
- 最大允许的缩放比例1.0
3、物理像素和物理像素比
- 物理像素点是指屏幕显示的最小颗粒，是物理真实存在的，是厂商在出厂的时候就设置好了的
- 物理像素比：一个px能显示的物理像素点个数
4、二倍图
- 在标准的viewport设置中，一般会使用倍图来提高图片质量，解决在高清设备中的模糊问题，（通常使用二倍图）
5、移动端开发的选项
- 常见的移动端开发：单独制作移动端页面、响应式兼容PC页面移动端
- 市场主流的选择(单独制作移动页面)
6、移动常见的问题解决方案
- webkit 兼容
- CSS初始化 normalize.css
- 官网地址：
box-sizing:border-box;-webkit-box-sizing:border-box;特殊样式（需要在初始化页面的时候加进去）- 点击高亮我们需要清除
*{ -webkit-tap-highlight-color: transparent; }- 移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式
input{ -webkit-appearance: none; }- 禁用长按页面时的弹出菜单
img,a { -webkit-touch-callout: none; }7、移动端技术选型
一、单独制作移动端页面（主流）
- 流式布局（百分比布局）流式布局只适合水平方向的布局，垂直方向需要用rem
- flex弹性布局（强烈推荐）
- less+rem+媒体查询布局
- 混合布局（流式、less、rem、媒体查询）
二、单独制作移动端页面（其次）
第二节、流式布局
1、流式布局原理
- 流式布局，就是百分比布局，也称非固定像素布局
通过把盒子的宽度设置成百分比，从而根据屏幕宽度来进行伸缩，不受不定像素的限制
流式布局是移动web项目比较常用的方式
注意：
制作过程中，需要定义页面的最大和最小支持的宽度 - max-width 最大宽度（max-height最大高度）
- min-width 最小宽度（min-height最小高度）
2、移动项目初始化准备内容
- 首先 添加 normalize.css
- 其次 添加 index.css
index.css 里面添加特殊样式部分的内容，不用死记硬背，理解原理，复制粘贴/*点击高亮我们需要清除清除 设置为transparent 完成透明*/*{ -webkit-tap-highlight-color: transparent; } /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/ input{ -webkit-appearance: none; } /*禁用长按页面时的弹出菜单*/ img,a { -webkit-touch-callout: none; }新增属性：设置垂直对齐
vertical-align: middle; 设置图片水平居中7、二倍精灵图做法
- 在firework里面把精灵图等比例缩放为原来的一半
- 然后根据新的大小测量坐标
- 然后代码里面的background-size设置为精灵图原来宽度的一半
9、线形渐变背景
- MDN文档里面搜索 background-image
MDN文档官网 :
例：
background-image: linear-gradient(0deg,#f1503b,#c82519 50%);10、滑动轮播图布局
图片格式- dpg图片压缩技术
（京东自主研发推出的dpg图片压缩技术，可以节省用户近50%的浏览量，能兼容jpeg) - webp图片压格式
（谷歌研发的图片格式，压缩体积只有jpeg的2/3）
第三节、flex布局
1-2、布局体验布局原理
- 兼容性好
- 布局繁琐
- 局限性，不能在移动端很好的布局
- 操作方便，布局非常简单，移动端应用广发
- PC端浏览器支持情况差
- IE11或更低版本，不支持或者只有部分支持
建议- 如果是PC端页面布局，还是使用传统布局
- 如果是移动端或者不考虑兼容性问题的PC端页面布局，还是使用flex弹性布局
flex布局原理- flex（flexible Box），意为弹性布局
- 当为父盒子设置为flex布局以后，子元素的float、clear、vertical-align（垂直对齐）属性将失效
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
- 采用flex布局的元素，称为flex容器，简称“容器”，它的所有子元素自动成为容器成员，成为flex项目，简称“项目”
flex属性值：display：flex;
例如：
div { display: flex; width: 400px; height: 100px; background-color: pink; justify-content: space-around; 设置主轴方向上子元素的排列方式 } span { width: 100px; height: 50px; background-color: burlywood; margin-right:10px ; flex: 1; 设置flex子项目占的份数 } <div> <span>1</span> <span>2</span> <span>3</span> </div>3、 flex-direction 属性
- flex-direction 用来设置主轴方向的
注意：主轴和侧轴类似于X轴和Y轴，但是主轴侧轴是可以变化的，侧轴随主轴的设定而变化，如果设置横向为主轴，那么纵向就为侧轴，如果设置纵向为主轴，那么横向就为侧轴
| 属性值 | 解释说明 |
|---|
| row | 主轴默认值从左到右 |
| row-reverse | 主轴从右到左 |
| column | 主轴从上到下 |
| column-reverse | 主轴从下到上 |
4、 justify-content 属性
- justify-content 用来设置主轴方向上子元素的排列方式
注意：使用这个属性之前，一定要确定好主轴是哪个
| 属性值 | 解释说明 |
|---|
| flex-start | 默认值,如果主轴是X轴，则从左到右 |
| felx-end | 从尾部开始排列 |
| center | 在主轴居中对齐 |
| space-around | 平分主轴剩余的空间 |
| space-between | 先两边贴边，剩下的项目，平分主轴中间剩余的部分（重要） |
5、 flex-wrap 属性
| 属性值 | 解释说明 |
|---|
| nowrap | 默认值，不换行 |
| wrap | 换行 |
6、 align-items 属性
- align-items 用来设置侧轴上子元素的排列方式（单行）
该属性是控制子项在侧轴上的排列方式
在子项为单项的时候使用
| 属性值 | 解释说明 |
|---|
| flex-start | 默认值，从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中 |
| stretch | 拉伸 |
7、 align-content 属性
align-content 用来设置侧轴上子元素的排列方式（多行的时候有效）
注意：只能用于子项出现换行的情况下，单行是没有效果的
| 属性值 | 解释说明 |
|---|
| flex-start | 在侧轴头部开始排列 |
| flex-end | 在侧轴尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余的空间 |
| space-between | 子项在侧轴两边贴边，剩余子项再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
8、 flex-flow 复合属性
- flex-flow 是复合属性，用来综合书写主轴方向flex-direction和是否换行flex-wrap
例如：
flex-flow:row nowrap;
9-10、flex布局子项常见属性
- flex子项目占的份数
- align-self控制子项自己在 侧轴的排列方式
- order属性定义子项的排列顺序（前后顺序）
- flex属性
flex属性定义子项目分配父盒子的剩余空间，用flex来表示占有多少份
属性值为数字，数字为1时，表示占总份数中的1份，默认值是0
例：
.item{ flex:2; (表示该子项目占有总份数中的2份)}- align-self属性
align-self属性定义自己的排列对齐方式，针对个体设置排列方式，层叠前面设置的样式 - order属性
order属性用来设置子项的排列先后顺序，数字越小，越靠前排列,默认值是0
注意：和z-index不一样，概念不同，不要混淆
例如：
.item{ order:1; 设置order为1的子项，排列顺序在默认值0的子项的后面}第四节、less+rem布局
1-2、rem理解
- 流式布局和flex布局只能对宽度进行等比例放大缩小，rem不仅能针对宽度，还能针对高度
- rem单位
rem(root em)是一个相对单位，类似于em ,em是参考父元素字体大小，rem是参考根标签html字号的大小
rem优势 (参考元素是html,一个页面只有一个html元素，所以可以实现整体控制)
3、媒体查询书写语法
- 媒体查询书写语法
媒体查询（Media Query）是CSS3的新语法
@media 可以针对不同的媒体类型和不同的屏幕尺寸定义不同样式
书写规范：
- 用@media开头，需要加@符号
- mediatype媒体类型，mediatype的值（all用于所以设备、print用于打印机、screen用于电脑屏幕、平板电脑、智能手机等）
- 关键字：and、not、only、or
- media feature 媒体特性，必须有小括号包含，media feature 媒体类型的值，暂时了解三个（width、min-width、max-width）
例如：
@media mediatype and | not | only (media feature) {CSS-code；}在屏幕设备中，当屏幕大于或者等于800px的时候，背景色为粉色
@media screen an (min-width:80px) { bady{ background-color:pink; }}4、媒体查询案例-背景变色
案例思路: 按照从小到大或者从大到小的思路
注意：为了防止混乱，习惯性按照从小到大来写，这样代码也更简洁
5、媒体查询+rem实现元素动态大小变化
定义html内元素的根大小，用媒体查询，定义宽度来缩放rem单位的元素值
6、媒体查询引入资源的方法
当设置的样式比较繁多的时候，可以直接在link里面判断媒体类型和媒体特性，然后引入CSS文件
例如：
<link rel="stylesheet" media="screen and (min-width:400px)" href="index.css">7-8、CSS的弊端和解决方法
- css是非程序式的语言，没有变量、函数等概念，没有计算能力，书写过程中冗余度比较高，不利于维护
为了解决这个问题，引入了less(Leaner Style Sheets)语言- less是一门css的扩展语言，也是css的预处理器
- 在css的语法基础上，引入了变量，运算以及函数等功能，简化了css的编写，降低css的维护成本
总结：less是一门css的预处理器，扩展了css的动态功能，可以用更少的代码做更多的事情
常见的css预处理器：Sass、Less、Stylus
9-12、less的使用
- less 变量
- less 编译
- less 嵌套
- less 运算
- less变量（变量是指没有固定的值，可以动态改变的
写法：
@变量名:赋值;
变量命名规范:
- 必须加@前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
例如：@color:pink;
变量使用规范:
直接使用，例：
body{ color:@color;}2. less 编译
方法一：用node.js里面的less，使用cmd命令行，把.less文件转换成.css文件，再引用
方法二：vscode里面的easy less插件，写.less文件，保存后，自动生成.css文件，引用
3. less 编译嵌套
大结构里面嵌套小结构的写法，更清晰更美观
例:
.header{ width:100px; height:100px; .logo{ width:10px; height:10px; }}注意：如果遇见 交集、伪类、伪元素选择器
- 当内层选择器前面没有&符号的时候，被解析为父选择器的后代
- 当有&符号的时候，就被解析为父元素自身或者父元素的伪类
4. less 运算
- 任何数字，任何颜色变量都可以参与运算，（+）（-）（*）（/）
注意: - 参与运算的两个数字，可以一个有单位，一个没有单位，最终计算结果的单位就是参与运算数字里面唯一的那个单位
- 参与运算的两个数字，两个都有单位，并且单位不同，最终单位取第一个数字的单位
- less运算符的左右必须加空格（更美观，计算准确），如果没有空格，会计算错误,例如： 1px + 5em
13-14、适配原理+适配方案
原理：
- 让一些不能等比自适应的元素，达到设备尺寸发生改变的时候，等比例适配当前设备
- 使用媒体查询，根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小发生变化的时候，尺寸也变化，进而达到等比例缩放的适配
rem实际开发适配方案
- 按照设计稿与设备宽度比例，动态计算并设置html根标签的font-size大小（媒体查询）
- css中，设计稿元素的宽，高，相对位置等取值，按照同比例换算为rem为单位的值
- rem适配方案技术使用（市场主流）
方案1：less+媒体查询+rem
方案2：flexible.js (更简单)
15、苏宁项目
- 项目技术选型
方案：采用单独制作移动页面的方案
技术：布局采用rem适配布局（less+rem+媒体布局）
设计图：采用750px设计尺寸
16、用@import导入less文件
- index.less文件里面引入其他的.less文件：
- 新建index.html
- 将其他.less文件引入到index.less里面
语法：
例如将common.less文件导入到index.less文件: @import "common"
24、适配方案2：flexble.js
<script src="js/flexible.js"></script>小技巧 ：如果不用less计算rem，可以用插件直接转换：
Vscode 将px转换成rem，安装ceerem插件即可
第五节 响应式布局
1、响应式页面兼容移动端
- 媒体查询
- bootstrap
响应式开发原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
2-3、响应式布局容器
- 响应式需要一个父级作为布局容器，来配合子级元素实现变化效果
- 原理就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，实现不同屏幕下，看到不同的页面布局和样式变化
平时响应式尺寸的划分
- 超小屏幕（手机，小于768px）:容器宽度设置为100%
- 小屏幕（平板，大雨等于768px）:容器宽度设置为750px
- 中等屏幕（桌面显示器，大于等于992px）:容器宽度设置为970px
- 大屏幕（大桌面显示器，大于等于1200px）:容器宽度设置为1170px
（也可以根据实际情况自己定义划分）
5、bootstrap
- bootstrap简介：来自（Twitter），是目前最受欢迎的前端框架，bootstrap 是基于HTML、CSS和JavaScript的，使web开发更简洁
中文官网：官网：bootstrap优点：- 标准化的html+css编码规范
- 提供了一套简洁直观强悍的组件
- 有自己的生态圈，开源框架，不断更新迭代
- 让开发更简单，提高了效率
6、bootstrap使用方法
注意：控制权在框架本身，使用者需要按照框架规定的某种规范使用它的样式库
bootstrap使用使用四部曲：
- 创建文件夹结构
- 创建html骨架结构
- 引入相关样式文件
- 书写内容
书写内容：
- 直接拿bootstrap预先定义好的样式来使用
- 修改bootstrap原来的样式，注意权重问题
- 明白它定义了哪些样式和这些样式能实现什么样的效果
7、bootstrap布局容器
bootstrap需要为页面内容和栅格系统包裹一个.container容器，它提供了两个作此用的类
1.container类
- 响应式布局的容器，固定宽度
- 超小屏幕（手机，小于768px）:容器宽度设置为100%
- 小屏幕（平板，大雨等于768px）:容器宽度设置为750px
- 中等屏幕（桌面显示器，大于等于992px）:容器宽度设置为970px
- 大屏幕（大桌面显示器，大于等于1200px）:容器宽度设置为1170px
2.container-fluid类
- 流式布局容器，百分比宽度
- 占据全部视口（viewport）的宽度
- 适合于制作移动端页面开发
例如:
<div class="container">111</div> <div class="container-fluid">222</div>8、bootstrap栅格系统
- 栅格系统（grid systems）,也称网格系统，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
- bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
bootstrap栅格系统也能实现响应式效果
移动设备优先使用
9、bootstrap栅格系统使用方法
栅格选项参数
栅格系统用于通过一系列的行（row）和列（column）的组合来创建页面布局，内容直接放进这些创建好的布局中
| 超小屏幕（手机）<768px | 小屏设备（平板）>=750px | 中等屏幕>=992px | 宽屏设备>=1200px |
|---|
| .container最大宽度 | 自动100% | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）数 | 12 | 12 | 12 | 12 |
- 按照不同的屏幕划分为1-12等份
- xs-extra small 超小
- sm-small 小
- md-medium中等
- lg-large大
- 列如果总数大于12，多余的列所在的元素将被作为一个整体另起一行排列
- 可以同时为一列指定多个设备的类名，以便划分不同的分数，例如class="col-md-4 col-sm-6"
10、列嵌套
- 一行一列里面的子元素可以再嵌套一个row,分成12列
只要有元素的地方，有父子关系的，都可以在父级设置一个row,添加栅格
例如：
<div class="col-4 row"> <p class="col-lg-6"> 1 </p> <p class="col-lg-6"> 2 </p> </div>11、列偏移
使用.col-md-offset- * 类可以将列向右侧偏移，这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）
例如：row里面的右侧元素 向右偏移4个栅格
<div class="row"> <div class="col-lg-4 ">左侧</div> <div class="col-lg-4 col-lg-offset-4">右侧</div></div>12、列排序
- .col-md-push- *往右推
- .col-md-pull- *往左拉
通过这两个类可以改变列（column）的顺序
12、bootstrap响应式工具
为了加快对移动设备友好的页面开发，利用媒体查询功能，并且使用这些工具类可以方便针对不同设备展示或者隐藏页面内容
| 类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
|---|
| .hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
与之相反的，visible-xs、visible-sm、visible-md、visible-lg 是针对不同设备显示某个内容
bootstrap其他，参考bootstrap文档
在线咨询
