# 二、移动 web 开发流式布局
# 1.移动端基础
# 1.1 浏览器现状
pc 端浏览器,移动端浏览器 webkit 内核进行兼容
# 1.2 手机屏幕现状--碎片化严重
# 1.3 移动端调试方法
# 2.视口(viewport)
浏览器显示页面内容的屏幕区域
# 2.1 布局视口 layoutviewport
# 2.2 视觉视口 visual viewport ---用户正在看到的网站的区域
# 2.3 理想视口 ideal viewport
# 2.4meta 视口标签
# 2.5 标准的 viewport 设置
# 2.6 二倍图
# 2.6.1 物理像素(分辨率)/物理像素比(1px 能显示的物理像素的个数)
物理像素点越多,越清晰
# 2.6.2 二倍图做法
# 2.6.3 背景缩放 background-size
background-size 规定了背景图像的尺寸
background-size:背景图像的宽度 背景图像的高度
1.只写一个参数,肯定是宽度,高度会等比例缩放
2.里面的单位可以跟百分比,相对于父盒子来说的
3.cover:把整个盒子完全盖住,可能有部分背景图片显示不全
4.contain:高度和宽度等比例拉伸,当宽度或者高度铺满 div 盒子时,不再进行拉伸,可能有部分空白区域
注意:多倍图切图:用 ps 中的 cutterman
# 2.7 移动端开发选择
# 2.7.1 移动端主流方案
# 1.单独制作移动端页面(主流) 京东商城手机版....
通过设备的不同,打开不同的页面,页面是单独的
# 2.响应式页面兼容移动端(其次)三星手机官网
兼容手机端和移动端(要考虑兼容性问题)
# 2.8 移动端技术解决方案
# 2.8.1 移动端浏览器
# 2.8.2 CSS 初始化 normalize.css
# 2.8.3 CSS3 盒子模型 box-sizing
padding 和 border 不会再增大盒子
# 2.8.4 特殊样式
# 2.9 移动端常见布局
# 2.9.1 移动端技术选型
# 3.0 流式布局(百分比布局)---常见的布局方式
通过盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩,不受固定像素的限制。
max-width 最大宽度 max-height 最大高度
min-width 最小宽度 min-height 最小高度
# 案例:京东移动端首页
# 重点:二倍精灵图的做法
# 图片格式:
# 3.1 flex 弹性布局(最好用,最方便的布局方式)
1. **如果是 PC 端页面,推荐传统布局**
2. **如果是移动端或 PC 端不考虑兼容性,推荐 flex 布局**
# 3.1.1 flex 布局原理
就是:通过给父盒子添加 flex 属性,来控制子盒子的位置和排列方式
flex:flexible box 的缩写,任何一个容器都可以用 flex 布局
当我们为父元素设为 flex 布局后,子元素的 float,clear,vertical-algin 属性将失效
# 3.1.2 flex 布局父项常见属性
flex-direction:设置主轴的方向
justify-content:设置主轴上子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置测轴上的子元素排列方式(单行)
flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
1.flex-direction:设置主轴的方向
默认的主轴是 x 轴 行 row 那么 y 轴就是侧轴
我们的元素是跟着主轴来排列的
我们可以设置我们的主轴为 y 轴,那么 x 轴就成了侧轴
2.justify-content:设置主轴上子元素排列方式
注意:使用这个属性之前一定要确定好主轴是哪一个
justify-content:flex-start (默认)左边对齐
justify-content:flex-end 右边对齐
justify-content:center 居中对齐
justify-content:space-around 平均分配剩余空间
justify-content:space-between 先两边贴边,再分配剩余的空间(重要)
3.flex-wrap:设置子元素是否换行
默认不换行,如果装不开,会缩小子元素的宽度。
flex-wrap:nowrap 不换行 wrap 换行
4.align-items:设置侧轴上的子元素排列方式(单行)
align-items:center 侧轴居中对齐
align-first-start 上沿对齐
align-items:center 下沿对齐
align-items:strength 拉伸(了解)
4.align-content:设置侧轴上的子元素的排列方式(多行)子元素出现换行效果,在单行下没有效果
5.flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap (opens new window)
# 3.2 flex 布局子项常见属性
# 3.2.1 flex 属性,从剩余空间中分配,表示占多数份数。
flex:number (默认 0)
# 3.2.2 align-self 控制子项自己在侧轴的排列方式(了解)
# 3.2.3 order(了解) 定义子项的排列顺序 默认为 0
# 3.3 背景线性渐变 必须添加浏览器私有前缀
# 3.4 移动 WEB 开发之 rem 适配布局(非常流行)
# 3.4.1 rem 单位
- rem 是一个相对单位,类似于 em
- em:相对于父元素字体大小
- rem 的基准是相对于 html 元素的字体大小
- 优点:可以通过修改 html 中文字的大小来改变页面中元素的大小可以整体控制
# 3.4.2 媒体查询(Media Query)---CSS3 新语法
@media---可以针对不同的的屏幕尺寸设置不同的样式
语法规范:
# 3.4.3 mediaType 查询类型
根据不同的终端设备划分成不同的类型
值 | 解释说明 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
scree | 用于电脑屏幕,平板电脑,智能手机等 |
# 3.4.4 关键字
将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
- and:可以将多个媒体特性连接到一起
- not:排除某个媒体类型,可以省略
- only:执行某个特定的媒体类型,可以省略
# 3.4.5 媒体特性
值 | 解释说明 |
---|---|
width | 定义输出设备中页面可见区域的宽度 |
min-width | 定义输出设备中页面最小可见区域的宽度 |
max-width | 定义输出设备中页面最大可见区域的宽度 |
/*这句话的意思是在我们的屏幕上,并且最大宽度是 800像素,设置我们想要的样式,*/
/* max-width:意思是小于等于800*/
/*媒体查询可以根据不同的屏幕尺寸改变不同的样式*/
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
@media screen and (max-width: 500px) {
body {
background-color: purple;
}
}
# 3.5 媒体查询+rem 实现元素动态大小变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<style>
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
.top {
height: 1rem;
font-size: 0.5rem;
background-color: green;
color: #ffffff;
text-align: center;
line-height: 1rem;
}
</style>
<body>
<div class="top">购物车</div>
</body>
</html>
# 3.6 引入资源
针对不同的媒体引入不同的 css 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
//媒体查询最好的方式是从小到大书写
<link rel="stylesheet" media="screen and (max-width:640px)" href="style320.css" />
<link rel="stylesheet" media="screen and (min-width:640px)" href="style640.css" />
</head>
<body>
<div></div>
<div></div>
</body>
</html>
# 3.7 less 基础
# 3.7.1 CSS 的弊端
# 3.7.2 less---CSS 的扩展语言,CSS 的预处理器 新的语言
less 的使用:
- less 变量
- less 编译
- less 嵌套
- less 运算
# 3.7.3 less 变量
@变量名:值;
- 变量命名规范:
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
//定义一个颜色为粉色的变量
@color: pink;
//定义字号为14的变量 命令规范与java一样,大小写敏感
@font14: 14;
body {
background-color: @color;
}
div {
background-color: @color;
}
span {
font-size: @font14;
}
# 3.7.4 less 编译 easy-less 插件(vsdcode)
需要把 less 文件转换为 css 文件
# 3.7.5 less 嵌套
// 1. less 嵌套,子元素的样式直接写到父元素里面
a {
background-color: purple;
//2. 如果有伪类,伪元素,交集选择器,我们内层选择器需要加&
&:hover {
background-color: aquamarine;
}
}
}
# 3.7.6 less 运算
@border: 5px;
div {
width: 100px-50;
width: (@border+5)\*2;
height: 100px\*2;
border: @border solid red
}
img {
width: 80/15rem;
height: 80/15rem;
}
注意:
- 乘号:* 除号:/
- 运算符左右两边必须敲一个空格隔开
- 两个数参与运算,如果只有一个数有单位,则最后的结果就以这个单位为准
- 两个数参与运算,如果两个数都有单位,而且不一样的单位,最后的结果以第一个单位为准
# 3.8 rem 适配方案 ---通过 rem 适配不同的屏幕
# 3.8.1 rem 适配方案技术使用
技术方案 1:less+媒体查询+rem
技术方案 2:flexible.js+rem(更简单,更推荐)
# 3.9 rem 实际开发适配方案 1 less+媒体查询+rem
# 3.9.1 设计稿常见尺寸宽度---现在基本以 750 为准
设备 | 常见宽度 |
---|---|
iPhone 4 5 | 640px |
iphone 6 7 8 | 750px |
Android | 常见 320px,360px,375px,大部分 4.7~5 寸的安卓设备为 720px |
# 3.9.2 动态设置 html 标签 font-size 大小
# 3.9.3 元素取值方法
- 最后的公式:页面元素的 rem 值=页面元素值(px)/(屏幕宽度/划分的份数(15/20 都行))
- 屏幕宽度/划分的份数 就是 html font-size 的大小
- 或者:页面元素的 rem 值=页面元素值(px)/html font-size 字体大小
# 案例:苏宁首页制作
rem 实际开发适配方案 1 less+媒体查询+rem
设计稿:750px
导入初始化项目的 normalize.css 文件
设置公共 common.less 文件
4.1 新建 common.js 设置好最常见的屏幕尺寸,里面媒体查询设置不同的 html 字体大小,因为除了首页其他页面也需要
4.2 我们关心的尺寸有 320px,360px,375px,384px,400px,414px,424px,480px,540px,720px,750px
4.3 划分的份数定为 15 等份
4.4 因为我们 pc 端也可以打开苏宁移动端首页,我们默认 html 字体大小为 50px,注意这句话写到最上面
5.新建 index.less 文件
将 common.less 文件引入到 index.less 文件中
@import 可以把一个样式文件导入到另一个样式文件中 @import “common”
link:是把一个样式文件引入到一个 html 文件中
# 4.0 简洁高效的 rem 适配方案 flexible.js
# 4.1flexible.js+rem(更简单,更推荐)
# 4.2 VScode px 转 rem 插件 cssrem
/* 如果我们的屏幕超过了 46.875rem 那么我们就按照 750 设计稿来走 不会让我们页面超过 46.875rem */
@media screen and (min-width: 46.875rem) {
html {
font-size: 4.6875rem !important;
}
}
# 移动端完整项目开发(详细见黑马面面文档)
# 1.1 蓝湖/募客写作平台
ui 设计师 psd 效果图完成后, 会上传到蓝湖/募客,同时拉前端工程师进入开发
募客官网,注册账号,点击安装 ps 插件,
# 4.3 移动 web 开发之响应式布局
# 4.3.1 响应式开发原理
通过媒体查询针对不同的宽度的设备进行布局和样式的设置,从而达到不同的设备的目的
设备划分 | 尺寸区间 |
---|---|
超小屏幕(手机) | <768px |
小屏设备(平板) | >=768px~<992px |
中等屏幕(桌面显示器) | >=992px--<1200px |
宽屏设备(大桌面显示器) | >=1200px |
# 4.3.2 响应式布局容器
响应式需要一个父级作为布局容器,来配合子元素来实现变化效果
原理:在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同页面的布局变化
平时我们的响应式尺寸划分
超小屏幕(手机,小于 768px):设置宽度为:100%
小屏幕(平板,大于等于 768px):设置宽度为:750px
中等屏幕(桌面显示器,大于等于 992px):设置宽度为:970px
大屏幕(大桌面显示器,大于等于 1200px):设置宽度为:1170px
<!DOCTYPE html>
<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>Document</title>
<style>
.container {
height: 150px;
background-color: pink;
margin: 0 auto;
}
/* 1. 超小屏幕下 小于 768 布局容器的宽度为 100% */
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
}
/* 2. 小屏幕下 大于等于768 布局容器改为 750px */
@media screen and (min-width: 768px) {
.container {
width: 750px;
}
}
/* 3. 中等屏幕下 大于等于 992px 布局容器修改为 970px */
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
/* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
</style>
</head>
<body>
<!-- 响应式开发里面,首先需要一个布局容器 -->
<div class="container"></div>
</body>
</html>
# 案例:响应式导航栏
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
}
.container {
width: 750px;
margin: 0 auto;
}
.container ul li {
float: left;
height: 30px;
width: 93.75px;
background-color: green;
color: #fff;
text-align: center;
}
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
.container ul li {
width: 33.33%;
}
}
</style>
<body>
<div class="container">
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li>导航6</li>
<li>导航7</li>
<li>导航8</li>
</ul>
</div>
</body>
</html>
# 4.4 Bootstrap 前端开发框架
# 4.4.1 Bootstrap 基本使用
- 创建文件夹结构
- 创建 html 骨架结构
- 引入相关样式文件
- 书写内容
(1)创建文件夹结构
(2)创建 html 骨架结构
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器,Bootstrap 预先定义好了这个类,叫.container
# 1.container 类
- 超小屏幕(手机,小于 768px):设置宽度为:100%
- 小屏幕(平板,大于等于 768px):设置宽度为:750px
- 中等屏幕(桌面显示器,大于等于 992px):设置宽度为:970px
- 大屏幕(大桌面显示器,大于等于 1200px):设置宽度为:1170px
# 2.container-fluid 类
- 流式布局容器 百分百宽度
- 占据全部视口(viewport)的容器
- 适合于单独做移动端开发
# 4.5 Bootstrap 的栅格系统
----将页面布局容器划分为等宽的列。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
# 4.5.1 栅格选项参数
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
---|---|---|---|---|
.container 最大宽度 | None (自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 |
- 行(row)必须放到 container 布局容器里面
- 我们实现列的平均划分 需要给列添加类前缀
- xs:extra small 超小 sm:small 小 md:medium 中等 la:large 大
- 列(column)大于 12,多余的列(column)所在的元素将被作为一个整体另起一行排列
- 每一列默认有左右 15 像素的 padding
- 可以同时为一列指定多个设备的类名,以便划分不同的份数 例如:class=”col-md-4 col-sm-6“
<!DOCTYPE html>
<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" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 一定不要忘记引入bootstrap 的样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<title>Document</title>
<style>
[class^='col'] {
border: 1px solid #ccc;
}
.row:nth-child(1) {
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
<!-- 如果孩子的份数相加等于12 则孩子能占满整个 的container 的宽度 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
</div>
<!-- 如果孩子的份数相加 小于 12 则会? 则占不满整个container 的宽度 会有空白 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-1">4</div>
</div>
<!-- 如果孩子的份数相加 大于 12 则会?多于的那一列会 另起一行显示 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-3">4</div>
</div>
</div>
</body>
</html>
# 4.5.2 列嵌套
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<!-- 我们列嵌套最好加1个行row 这样可以取消父元素的padding值而且高度自动和父级一样高-->
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
# 4.5.3 列偏移 col-md-offset-* 实际是给对应的盒子加一个外边距
<div class="container">
<div class="row">
<div class="col-md-4">左侧</div>
<!-- 偏移的份数就是:12-两个盒子的份数-->
<div class="col-md-4 col-md-offset-4">右侧</div>
</div>
<div class="row">
如果只有一个盒子,那么就偏移=(12-8)/2
<div class="col-md-8 col-md-offset-2">中间</div>
</div>
</div>
# 4.5.4 列排序 col-md-push-_ col-md-pull-_ 改变列的顺序
<div class="row">
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-8 col-md-pull-4">右侧</div>
</div>
# 4.5.5 响应式工具
利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容
类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
---|---|---|---|---|
.hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
.hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
.hidden-md | 可见 | 可见 | 隐藏 | 可见 |
.hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
与之相反的,是 visible-xs visible-sm visible-md visible-lg 是显示某个页面内容
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 一定不要忘记引入bootstrap 的样式文件 -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
</head>
<style>
.row > div {
height: 50px;
}
div:nth-child(1) {
background-color: blue;
}
div:nth-child(2) {
background-color: yellow;
}
div:nth-child(3) {
background-color: green;
}
div:nth-child(4) {
background-color: pink;
}
span {
width: 50px;
height: 50px;
color: #ffffff;
font-size: 28px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<span class="visible-md">我会变魔术</span>
</div>
<div class="col-md-3">2</div>
<div class="col-md-3 hidden-sm hidden-xs">注意看我变化</div>
<div class="col-md-3">4</div>
</div>
</div>
</body>
</html>
# 案例:阿里百秀首页
技术选型:
方案:我们采取响应式页面开发
技术:bootstrap 框架
设计图:本设计图采用 1280px 设计尺寸
# 4.6 vw 和 vh
vw/vh 是一个相对单位(类似于 em/rem)
vw:viewport width 视口宽度单位
vh:viewport height 视口高度单位
相对视口的尺寸计算结果:
1vw=1/100 视口宽度
1vh=1/100 视口高度
和百分比的区别:百分比是相对于父元素来说的,而 vw,vh 是相对于当前视口来说的
# 4.7 vw 怎么使用
- 元素单位直接使用 新单位 vw/vh 即可。
- 因为 vw/vh 是相对单位,所以不同视口(屏幕)下,宽高一起变化完成适配。
<style>
div {
width: 10vw;
height: 10vh;
background-color: pink;
}
</style>
<body>
<div></div>
</body>
# 4.8 vw/vh 如何还原设计稿
# 4.9vw 注意事项
开发中使用 vw,需要像素大厨有哪些改动?
把模式改为 2x 模式
开发中使用 vw,如何还原设计稿?
确定设计稿视口宽度。比如 375
直接使用测量数值 / (视口宽度 / 100)
比如:50/(375/100)
因为涉及到大量除法,还是适合 LESS 搭配更好点
我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的,所以开发中使用 vw 就基本够用了。vh 很少使用。
兼容性:网站:https://caniuse.com/
# 5.0 如何下载 b 站字体图标
← css基础