目录：2、流式布局 3、flex布局 4、rem适配布局-media 5.less
一、移动端技术选型
| 1、单独制作移动端页面（主流） | 2、响应式页面兼容移动端（其次） |
|---|---|
| 流式布局（百分比布局） | 媒体查询 |
| flex弹性布局（强烈推荐） | bootstarp |
| less + rem +媒体查询布局 | |
| 混合布局 |
二、流式布局（百分比布局）
定义：通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
给父盒子：
max-widthmax-height最大宽高min-widthmin-height最小宽高
2.1 流式布局 例子1
不管网页的宽度怎么调整，两个div会分别占50%的宽度：
但是注意这里设置了 最大宽度和最小宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流式布局</title>
<style>
* {
padding: 0;
margin: 0;
}
section {
width: 100%;
height: 200px;
/* 最大宽度，最小宽度，在父盒子中 不设置 里面的盒子会掉下来*/
max-width: 900px;
min-width: 500px;
margin: 0 auto;
}
div {
float: left;
width: 50%;
height: 100%;
}
div:nth-child(1) {
background-color: tomato;
}
div:nth-child(2) {
background-color: yellow;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>
效果图：
image.png
2.2 流式布局 例子2
一行三个盒子，两边的盒子大小固定不变，中间的盒子随着窗口的大小而变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流式布局-小案例</title>
<style>
.bbox {
height: 50px;
width: 100%;
position: relative;
overflow: hidden;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 50px;
background-color: violet;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 50px;
background-color: tomato;
}
.center {
height: 40px;
margin: 0 50px;
margin-top: 5px;
background-color: turquoise;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="bbox">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
效果图：
image.png
image.png
三、flex布局
建议：
1、 如果是PC端页面布局，我们还是传统布局。
2、 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局
注意：
- 但我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
3.1 flex布局父项常见属性
| 属性 | 说明 | 属性值 |
|---|---|---|
| flex-direction | 设置主轴的方向 | row(默认从左到右)、row-reverse、column、column-reverse |
| justify-content | 设置主轴上的子元素的排列方式 | flex-start、flex-end、center、space-around、space-between |
| flex-wrap | 设置子元素是否换行 | nowrap、wrap |
| align-content | 设置侧轴上的子元素的排列方式（多行） | flex-start、flex-end、center、stretch、space-around、space-between |
| align-items | 设置侧轴上的子元素排列方式（单行） | flex-start、flex-end、center、stretch（拉伸、但是子盒子不要给高度） |
| flex-flow | 复合属性，相当于同时设置了 flex-direction 和 flex-wrap | flex-flow:column wrap; |
| flex-grow | 分配flex容器除内容外剩余空间的比例 | 自己还没有试过，不知道是否可行 |
3.2 flex布局子项常见属性
| 属性 | 说明 | 注意 |
|---|---|---|
| flex: | （剩余空间) 子项占的份数 | |
| align-self | 控制子项自己在侧轴的排列方式 | 类似于父项中的align-items，这里可以单独给到子项 |
| order | 定义子项的排列顺序（前后顺序） | 数字越小越靠前(默认是0） |
四、rem适配布局
1、页面布局文字能否随着屏幕的大小变化而变化？
2、流式布局和flex布局主要针对于宽度布局，那高度如何设置？
3、怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？
4.1 基础
rem单位
- rem（root em）是一个相对的单位，类似于em，em是元素字体大小。
- em单位的基准是基于 父元素 字体大小
- rem单位的基准是相对于 html 元素的字体大小
rem优点
可以通过修改html里面的文字大小来改变页面中元素的大小 可以整体控制
1、em单位例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem</title>
<style>
div {
font-size: 10px;
}
p {
/* 这里p的宽高就是 150px*150px ===>10*15 */
width: 15em;
height: 15em;
background: olivedrab
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
2、rem单位例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem</title>
<style>
html {
font-size: 20px;
}
/* 这里的宽高：200px*200px */
.box {
width: 10rem;
height: 10rem;
background-color: palegoldenrod;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
4.2 媒体查询
上述案例中 html中的文字大小定死了，我们怎么可以根据设备自动修改大小？
4.2.1 定义：媒体查询（Media Query）是CSS3新语法。
- 使用
@media查询，可以针对不同的媒体类型定义不同的样式@media可以正对不同的屏幕宽度设置不同的样式- 当你重置浏览器大小的过程中，页面也会根据浏览器的高度和宽度重新渲染页面
- 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
4.2.2 语法规定
@media mediatype and | not | only (media feature){ css-code }
- @media开头 注意@符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性
1、mediatype 查询类型
将不同的终端设备划分为不同的类型，称为媒体类型
值 说明 all 用于所有设备 用于打印机和打印预览 scree 用于电脑屏幕，平板电脑，智能手机等 2、关键字
关键词将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
- and : 可以将多个媒体特性连接到一起，相当于且。
- not : 排除某个媒体类型，相当于“非”的意思，可以省略。
- only : 指定某个特定的媒体类型，可以省略。
<style>
/* 媒体查询 可以根据不同的屏幕尺寸再改变不同的样式 */
@media screen and (max-width:1000px) {
body {
background-color: palegreen;
}
}
@media screen and (max-width:500px) {
body {
background-color: pink;
}
}
</style>
/* 两个条件是这样写的*/
@media screen and(min-width:501px) and (max-width:600px) {
body {
background-color: pink;
}
}
4.2.3 媒体查询 + rem实现元素动态大小变化
image.png
4.2.4 引入资源（理解）
当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets（样式表）。
原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mediaLink</title>
<style>
/* 当我们屏幕大于等于 640px以上的时候，我们让div 一行显示2个 */
/* 屏幕小于640px是，div一行显示一个 */
/* 媒体查询最好是从小到大 css样式层叠 */
/* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */
</style>
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
</head>
<body>
<div></div>
<div></div>
</body>
</html>
/* style640.css */
div {
width: 50%;
height: 100px;
float: left;
}
div:nth-child(1) {
background-color: aqua;
}
div:nth-child(2) {
background-color: red;
}
/* style320.css */
div {
width: 50%;
height: 100px;
}
div:nth-child(1) {
background-color: aqua;
}
div:nth-child(2) {
background-color: red;
}
4.3 rem 适配方案技术使用
- 技术方案一： less 媒体查询 rem
- 技术方案二(推荐)：flexible.js rem
五、Less
5.1 维护css的弊端
css是一门非程序语言，没有变量、函数、scope（作用域）等概念。
- css需要书写大量看似没有逻辑的代码，css冗余度是比较高的。
- 不方便维护及扩展，不利于复用。
- css没有很好的计算能力。
- 非前端工程师来讲，往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目。
如下例子的缺点：
html 中写好了 font-size：50px；
给img 82px82px 为了要会随着屏幕变化 要用rem单位；
这里就需要 用计算机 算一下：82/50=1.64
所以 写上 1.64rem1.64rem
这样计算过程就会很麻烦
5.2 Less介绍
定义：Less(Leaner Style Sheets)是CSS扩展语言，也成为CSS预处理器。
为CSS加入程序式语言的特性
less在CSS语法基础上，引入变量，MIxin（混入）,运算以及函数等功能, 大大简化了CSS的缩写,并且降低了CSS的维护成本。
常见的CSS预处理器：Sass 、Less 、Stylus
5.2.1 less 变量命名规范
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
// 新建 less结尾的文件
@color: red;
@font14: 14px;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
5.3 Less 编译
我们需要把我们的Less文件 编译成为css文件，这样我们的html页面才能使用。
Easy Less 插件 将less文件编译为css文件
保存 less 文件 自动会生成css文件：
image.png
引入css文件：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Less</title>
<link rel="stylesheet" href="my.css">
</head>
5.4 Less嵌套
5.4.1 less嵌套 子元素的样式直接写到父元素里面
@color: red;
@font14: 14px;
body {
background-color: @color;
div {
color: @color;
font-size: @font14;
}
}
5.4.2 less嵌套 伪元素选择器、伪类选择器、交集选择器，在前面添加 & 符号
// a:hover{ }在less中应该这么写
a{
color: brown;
&:hover{
color: chartreuse;
}
}
5.4.3 less嵌套 可以省略 -前面的类名 用 &- 符号 代替
// .html 文件
<div class="main">
main中的内容
<div class="main-content">
main-content中的内容
</div>
</div>
// .less 文件
.main {
color: cornflowerblue;
&-content {
color: chartreuse;
}
}
// .css 文件
body .main {
color: cornflowerblue;
}
body .main-content {
color: chartreuse;
}
5.5 Less 运算
定义：
任何数字、颜色或者变量都可以参与运算。就是Less提供了 加（+）、减（-）乘（*）除（/）算术运算。
注意：
- 运算符中间 左右有个空格隔开
width: 200px - 100;- 对于两个不同单位的值之间的运算，运算结果的值取第一个值得单位
- 如果两个值之间只有一个有单位，则运算结果就取该单位
- 特别注意：除法运算 要加上（），否则除法运算不会生效
height: (400 / 2px);- 可以复合运算
height:(200px + 50px) * 2- 颜色 也可以运算
background-color:#666 - #222结果是：#444
.yunsuan {
width: 200px - 100;
height: (400 / 2px);
border: 2px * 2 solid rebeccapurple;
font-size: (5px / 2) + 1;
}
body .yunsuan {
width: 100px;
height: 200px;
border: 4px solid rebeccapurple;
font-size: 3.5px;
}
