H5基础——04移动开发基础
目录
移动端基础
视口
二倍图
移动端开发选择
移动端技术解决方案
移动端web开发之流式布局
移动端web开发之flex布局
- flex布局原理
- flex布局父项常见属性
- flex布局子项常见属性
移动端web开发之rem布局
Less基础
苏宁移动首页制作
响应式开发
Bootstrap前端开发框架
栅格系统 grid systems
阿里百秀首页案例
移动端基础
浏览现状
国内的UC和QQ，百度等手机浏览器都是根据webkit修改过来的内核，国内尚无自主研发的内核。
兼容移动端主流浏览器，处理webkit内核浏览器即可。
手机屏幕现状
移动端设备屏幕尺寸非常多，碎片化严重。
作为开发者无需关注这些分辨率，因为我们常用的尺寸单位px
移动端调试方法
- Chrome DevTools模拟手机调试
- 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
- 使用外网服务器，直接IP或域名访问
视口
视口viewport是浏览器显示页面内容的屏幕区域。可分为布局视口、视觉视口、理想视口。
布局视口 layout viewport
- 用于解决早期的PC端页面在手机上显示的问题
- ios，Android基本都将这个视口分辨率设置为980px，所有PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
视觉视口 visual viewport
- 用户正在看到的网站的区域
- 可通过缩放操作视觉视口，但不影响布局视口，布局视口仍保持原来宽度
理想视口 ideal viewport
- 为使网站在移动端有最理想的浏览和阅读宽度而设
- 对设备来说，是最理想的视口尺寸
- 需要手动添加meta视口标签 通知浏览器操作
- meta视口标签的主要目的：布局视口的宽度和视觉视口的宽度一致，即设备多宽，布局的视口就多宽
标准的viewport设置
- 视口宽度和设备保持一致
- 视口默认缩放比例1.0
- 不允许用户自行缩放
- 最大缩放比1.0
- 最小缩放比1.0
| 属性 | 解释说明 |
|---|---|
| width | 宽度设置的是viewport宽度 可设置device-width特殊值 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可缩放 yes或no（1或0） |
二倍图
物理像素&物理像素比
- 物理像素点指的是屏幕显示的最小颗粒，是真实存在的，出厂设置好的。 即分辨率
- 物理像素比，屏幕像素比 即1px能显示的物理像素点的个数
/* 1. 物理像素 就是我们说的分辨率 iPhone8的物理像素是 750 */
/* 2. 在 iPhone8里面 1px 开发像素 = 2个物理像素 开发尺寸375*/
多倍图
- PC端和早期的手机屏幕/普通手机平面：1CSS像素=1物理像素
- Retina（视网膜屏幕）是一种显示技术，可以把更多的物理像素点压缩至一块屏幕里，从而达到更多分辨率，并提高屏幕显示的细腻程度
- 对于一张50*50px的图片，在Retina显示屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
- 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
- 通常使用二倍图 因为iPhone6\7\8的影响，但是还存在3、4倍图的情况，这个看实际公司需求
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
/* 我们需要一个50*50像素（css像素）的图片 直接放到我们的iphone8 里面会放大2倍 100* 100 就会模糊 */
/* 我们采取的是 放一个 100* 100 图片 然后手动的把这个图片 缩小为 50* 50 （css像素） */
/* 我们准备的图片 比我们实际需要的大小 大2倍，这就方式就是 2倍图 */
img:nth-child(2) {
width: 50px;
height: 50px;
}
style>
head>
<body>
<img src="images/apple50.jpg" alt="">
<img src="images/apple100.jpg" alt="">
body>
html>
背景缩放 background-size
规定背景图像的尺寸
background-size：背景图片宽度 背景图片高度
- 单位： 长度|百分比|cover|contain
- cover 扩展 盖住整个盒子
- contain 扩展 使其高度和宽度完全适应内容区域 背景图片显示全 盒子可能会有空白
背景图片2倍图
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
/* 1. 我们有一个 50 * 50的盒子需要一个背景图片，但是根据分析这个图片还是要准备2倍， 100*100 */
/* 2. 我们需要把这个图片缩放一半，也就是 50*50 background-size*/
div {
width: 50px;
height: 50px;
border: 1px solid red;
background: url(images/apple100.jpg) no-repeat;
background-size: 50px 50px;
}
style>
head>
<body>
<div>div>
body>
html>
移动端开发选择
1.单独制作移动端页面（主流）
通常，网址域名前加m（mobile）可打开移动端页面。通过判断设备，若移动设备打开，则调到移动端页面。
- 流式布局（百分比布局）
- flex弹性布局（强烈推荐）
- less+rem+媒体查询布局
- 混合布局
2.响应式页面兼容移动端（其次）
通过判断屏幕宽度来改变样式，以适应不同终端。
缺点：制作麻烦，耗大精力去调兼容性问题。
- 媒体查询
- bootstrap
移动端技术解决方案
移动端浏览器
移动端浏览器基本以webkit内核为主，我们就考虑webkit兼容性问题。
webkit对H5标签和css兼容性很好，放心使用。
我们浏览器私有前缀只要考虑添加webkit即可
CSS初始化 normalize.css
官网http://necolas.github.io/normalize.css
CSS盒子模型
box-sizing：border-box；盒子宽度=width width包含了border和padding
传统的盒子模型
box-sizing：content-box； 盒子宽度=border+padding+width
特殊样式
/*css3盒子模型*/
box-sizing:border-box;
-webkit-box-sizing:border-box;
/*点击高亮我们需要清除 设置为transparent透明*/
-webkit-tap-highlight-color:transparent;
/*在移动端浏览器默认的外观在ios上加这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance:none;
/*禁用长按页面时的弹出菜单*/
img,a{ -webkit-touch-callout:none;}
移动端web开发之流式布局
流式布局（百分比布局）
- 流式布局、百分比布局、非固定像素布局
- 通过盒子的宽度设置百分比来根据屏幕的宽度进行伸缩，不受固定像素的控制，内容像两侧填充。
- 移动web开发比较常见的布局方式
- max-width：最大宽度（max-height 最大高度）
- min-width：最小宽度（min-height 最小高度）
二倍精灵图做法
- 在FW或PS中，把精灵图等比例缩放为原来一半（不要保存）
- 根据大小 测量指定图标的坐标 测出的为background的x y值
- background-size：精灵图原来宽度的一般
移动端web开发之flex布局
传统布局
- 兼容性好
- 布局繁琐
- 局限性，不能在移动端很好的布局
flex弹性布局
- 操作方便，布局极为简单，移动端应用广泛
- PC端浏览器支持情况较差
- IE11或更低版本，不支持或仅部分支持
1.如果是PC端页面布局，用传统。
2. 如果移动端，或者不考虑兼容性问题的PC端页面布局，用flex弹性布局
flex布局原理
flex是flexible Box的缩写，“弹性布局”。用来为盒状模型提高最大的灵活性，任何一个容器都可以指定为flex布局。不分行内元素，块元素，行内块。
- 当我们父盒子设为flex布局后，display：flex；子元素的float，clear，和vertical-align属性失效
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
- 采用flex布局的容器，成为flex容器。它的所有子元素成为flex项目
布局原理：
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
flex布局父项常见属性
flex-direction:设置主轴方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素的排列方式（单行）
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
flex-direction:设置主轴方向
1.主轴和侧轴 （行和列、x和y轴）
flex-direction设置谁为主轴，剩下的就是侧轴。我们的子元素是跟着主轴排列的
| 属性值 | 说明 |
|---|---|
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
justify-content：设置主轴上的子元素排列方式
注意：使用这个属性前，一定要确定好主轴是哪个
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值 从头开始，如果x为主轴，则从左到右 |
| flex-end | 贴着尾部排列 和row-reverse 有很大区别 |
| center | 在主轴居中对齐 |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间（重要） |
flex-wrap：设置子元素是否换行
flex默认是不换行的，如果装不开，则会缩小子元素的宽度
| 属性值 | 说明 |
|---|---|
| nowrap | 默认 不换行 |
| wrap | 换行 |
align-items：设置侧轴上的子元素的排列方式（单行）
控制子项在侧轴（默认y轴）上的排列方式 子项为单行时 使用
| 属性值 | 说明 |
|---|---|
| flex-start | 默认 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起（垂直居中） |
| stretch | 拉伸 |
align-content：设置侧轴上的子元素的排列方式（多行）
只能用于子项出现换行的情况（多行），在单行下没有效果
| 属性值 | 说明 |
|---|---|
| flex-start | 默认 在侧轴的头部开始排列 |
| flex-end | 在侧轴尾部排列 |
| center | 侧轴中间 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
align-content和align-items区别
- align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
- align-content适应于 换行（多行）情况下（单行情况下无效），可设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
- 单行找align-items 多行找align-content
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
flex-flow:row wrap;
flex布局子项常见属性
- flex子项目占的份数
- align-self控制子项目自己在侧轴的排列方式
- order属性定义子项的排列顺序（前后顺序）
flex属性定义子项目分配剩余空间，用flex来表示占多少份数
.item{
flex :;/*default 0*/
align-self控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式。可覆盖align-items属性 默认值auto ，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
span :nth-child(2){
/*设置自己在侧轴上的排列方式*/
align-self：flex-end;
order属性定义项目的排列顺序
数值越小，排列越靠前，默认0
和z-index不一样
.item{
order:;
}
携程网首页案例制作
常用初始化样式
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
背景线性渐变
语法
background：linear-gradient（起始方向 ，颜色1，颜色2）；
background：-webkit-linear-gradient（left ，red，blue）；
background：-webkit-linear-gradient（left top ，red，blue）；
背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词 或者度数 如果省略，默认是top
移动端web开发之rem适配布局
1.页面布局文字能够随着屏幕大小变化而变化?
2.流式布局和flex布局主要针对于宽度布局，高度如何控制？
3.怎么样让屏幕发生变化的时候元素的高度和宽度等比例缩放？
可通过rem布局解决
rem单位
- em相对于父元素 的字体大小来说的
- rem 相对于 html元素 字体大小来说的
- rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
比如，根元素（html）设置font-size为12px；非根元素设置width：2rem；则换成px表示就是24px。
媒体查询
媒体查询（Media Query）是CSS3新语法
- 使用@media查询，可以针对不同的媒体类型定义不同样式
- @media可以针对不同的屏幕尺寸设置不同样式
- 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
比如：根据不同页面宽度改变背景颜色
语法
@media mediatype and|not|only（media feature）{
CSS code;
}
- 用@media开头
- mediatype媒体类型
- 关键字 and not only
- media feature媒体特性 必须有小括号包含
mediatype查询类型
| 值 | 解释 |
|---|---|
| all | 所有设备 |
| 打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等 |
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
- and：可将多个媒体特性连接到一起，且
- not：排除某个媒体类型 非
- only 指定某个特定的媒体类型
媒体特性
| 值 | 解释 |
|---|---|
| width | 定义输出设备中页面可见区域的宽度 |
| min-width | 定义输出设备中的最小可见区域 |
| max-width | 定义输出设备中的最大可见区域 |
为了防止混乱，媒体查询推荐从小到大写
引入资源
当样式比较繁多的时候，我们可以根据不同的媒体使用不同的css文件
原理：直接在link中判断设备尺寸，然后引入不同css文件
Document
1
2
less基础
Less(Leaner Style Sheets缩写)是一门CSS扩展语言，也称为css预处理器
做为css的一种扩展形式，并没有减少css的功能，而是在现有css语法上，为css加入程序式语言的特性。
在css语法基础上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化css代码，降低css维护成本，less让我们用更少的代码做更多的事情。
常见css预处理器：Sass、Less、Stylus
Less是一门css预处理语言，扩展了css的动态特性
Less安装
1.安装node.js
2.检查是否安装成功，使用cmd命令 输入node -v 查看版本号
3.基于nodejs在线安装Less ，使用cmd命令输入 npm install -g less
4.检查是否安装成功，使用cmd命令 lessc -v
Less使用
首先先建一个后缀名为.less的文件，在这个less文件中写less语句
Less变量
@变量名 :值；
变量命名规范：
1.必须有@前缀
2.不能包含特殊字符
3.不能数字开头
4.大小写敏感
@color:pink;
// 定义一个粉色的变量
@color: pink;
// 错误的变量名 @1color @color~@#
// 变量名区分大小写 @color 和 @Color 是两个不同的变量
// 定义了一个 字体为14像素的变量
@font14: 14px;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
a {
font-size: @font14;
}
Less编译
less包含一套自定义的语法及一个解析器。
用户根据这些语法定义自己的样式，这些样式规则通过解析器，编译成对应的css文件。
把less编译为css文件，这样html文件可使用
在VScode中安装 Easy Less插件即可，保存less文件时会自动编译为css文件
Less嵌套
如果遇到（交集|伪类|伪元素选择器）
没有&符号，解析为后代
有&符号，解析为父元素自身或父元素的伪类
// 1. less嵌套 子元素的样式直接写到父元素里面就好了
a {
color: red;
// 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
&:hover {
color: blue;
}
}
相当于css的
a:hover{ //注意a 和： 之间没有空格！！！
color;red;
}
.nav {
.logo {
color: green;
}
&::before {
content: "";
}
}
Less运算
- 运算符中间有空格隔开 1px + 5
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就取该单位
rem适配方案
1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做为尺寸单位，当html字体大小变化 元素尺寸也会发生变化，从而达到等比缩放的适配。
技术方案1
less
媒体查询
rem
技术方案2（推荐）
flexible.js
rem
技术方案1
1.动态设置html标签font-size大小
假设设计稿750px，把整个屏幕划分成15等份（划分标准不一，可20份也可10等份） 750/15=50px 50px作为html地font-size。
假设设计稿320px，font-size大小320/15=21.33px
2.元素大小取值方法
页面元素的rem值=元素页面值（px）/html的font-size大小
苏宁网移动首页制作
1.技术选型
方案：采取单独制作移动页面方案
技术：布局采取rem适配布局（less+rem+媒体查询）
设计图：采用750px设计尺寸
2.搭建相关文件夹结构
3.设置视口标签以及引入初始化样式
//此页面对应的css文件
4.设置公共common.less文件
1.新建common.less文件 利用媒体查询设置不同的html字体大小
2.我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
3.划分的份数定位15等份
4.因为pc端也可打开此页面，默认html字体大小50px，这句话写到最上面
5.新建index.less文件
将刚才设置好的common.less文件引入到index.less文件中
@import "common"
// @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面
// link 是把一个 样式文件引入到 html页面里面
生成的index.css引入到index.html页面
6.body样式
body {
min-width: 320px;
width: 15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}
技术方案2 flexible.js和rem
高效简洁的rem适配方案 flexible.js
手机淘宝团队出的简洁高效 移动端适配库
我们不需要写媒体查询了 ，flexible.js做了处理
原理：把当前设备划为10等份。可取flexible.js更改划分
flexible.js提供的文字大小是根据当前屏幕尺寸来进行计算的，实际工作我们常常会对一些屏幕尺寸做些限制
/* 如果我们的屏幕超过了 750px 那么我们就按照 750设计稿来走 不会让我们页面超过750px */
@media screen and (min-width: 750px) {
html {
font-size: 75px!important;
}
}
比如当前设计稿750px，我们只需要把html文字大小设置为75px（750/10）即可
里面元素的rem值=页面元素px/ 75
flexible.js下载地址 https://github.com/amfe/lib-flexible
VScode插件：把px转换为rem cssrem
cssrem 默认的html字体大小为16px 可更改
setting->搜索 ceerem root font ->改值->重启VScode
响应式开发
响应式开发原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
| 设备划分 | 尺寸区间 | 设置宽度 |
|---|---|---|
| 超小屏幕（手机） | <768px | 100% |
| 小屏设备（平板） | >=768px~<992px | 750px |
| 中等屏幕（桌面显示器） | >=992px ~<1200px | 970px |
| 宽屏设备（大桌面显示器） | >=1200px | 1170px |
响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
每个媒体查询下写对应尺寸的样式
Document
Bootstrap前端开发框架
bootstrap简介
中文官网：https://www.bootcss.com/
官网：https://getbootstrap.com/
Bootstrap是目前最受欢迎的前端框架。基于css，html和JavaScript。
框架：一套架构，有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
Bootstrap使用
1.创建文件夹结构
2.创建html骨架
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
head>
<body>
body>
html>
3.引入相关样式文件
4.书写内容
- 直接拿bootstrap预先定义好的样式来使用
- 修改 bootstrap原来的样式，注意权重问题
- 学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
Bootstrap栅格系统
布局容器
bootstrap需要为页面内容和栅格系统包裹一个.container容器,它提供了两个作此作用处的类
1.container类
- 响应式布局的容器 固定宽度
- 大屏（>=1200px） 宽度定为1170px
- 中屏（>=992px） 宽度定970px
- 小屏（>=768px） 宽度定为750px
- 超小屏（100%）
2. container-fluid类
- 流式布局容器 百分比宽度
- 占据全部视口（viewport）的容器
栅格系统 grid systems
它指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格选项参数
| 超小屏（手机）<768px | 小屏设备（平板）>=768px | 中等屏（桌面显示器）>=992px | 宽屏设备（大桌面显示器）>=1200px | |
|---|---|---|---|---|
| .container最大宽度 | 自动（100%） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
- 如果孩子的份数相加等于12 则孩子能占满整个 的container 的宽度
如果孩子的份数相加 小于 12 则会？ 则占不满整个container 的宽度 会有空白
如果孩子的份数相加 大于 12 则会？多于的那一列会 另起一行显示 - 行（row）可以去除父容器左右的15px边距
- 每一列默认左右15px的padding
- 可同时为一列指定多个设备的类名，以便在不同屏幕尺寸下划分不同份数 如class=“col-md-4 col-sm-6”
列嵌套
栅格系统内置的栅格系统将内容再次嵌套。
我们可以通过添加一个新的.row元素和一系列.col-sm-元素到已经存在的.col-sm-元素内。
列嵌套最好加一个.row元素，这样可以去掉父元素的padding值，并且和父级一样高。
列偏移
使用.col-md-offset-* 类可以将列向右侧偏移。
列排序
通过使用.col-md-push-*和,col-md-pull-*类改变列的顺序。
左侧push 、右侧pull
左侧
右侧
响应式工具
为加快对移动设备友好的界面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容，
.hidden-xs 超小屏下隐藏，其他可见
.hidden-sm 小屏下隐藏，其他可见
.hidden-md 中屏下隐藏，其他可见
.hidden-lg 大屏下隐藏，其他可见
相反.visible再相应屏幕尺寸下显示
阿里百秀首页案例
/* 修改container的最大宽度为 1280 根据设计稿来走的 */
@media screen and (min-width: 1280px) {
.container {
width: 1280px;
}
}
.logo img {
display: block;
/* width: 100%; */
/* logo图片不需要缩放 */
max-width: 100%;
margin: 0 auto;
}
img {
width:100%;
}
图片能够随着屏幕尺寸的变化自适应
屏幕划分分析
1.屏幕缩放发现 中屏幕和大屏幕布局 是一致的。因此我们列定义为col-md- 即可，md是大于等于970以上的
2.小屏幕布局发生变化 需要为小屏幕根据需求改变布局
3.超小屏幕布局发生变化 需要为超小屏幕根据需求改变布局
策略： 先布局md以上的pc端布局，最后根据实际需求在修改 小屏幕和超小屏幕的特殊布局样式。
移动端技术选型
推荐 flex弹性布局和rem适配布局
我们选取一种为主要技术选型，其他技术做为辅助，这种混合开发技术。
附注：
条件注释