1.视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
1.1 布局视口 layout viewport
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
ios, Android基本都将这个视口分辦率设置为 980px ，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过 手动放网页。
1.2 视觉视口 visual viewport
字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的亮度。
1.3 理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读完度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的 ：布局视口的完度应该与理想视口的宽度一致
简单理解就是设备有多宽，我们布局的视口就多宽
1.4meta视口标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
属性 解释
width 宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale 初始缩放比，大于0的数字
maximum-scale 最大缩放比，大于0的数字（最大可以缩放的程度）
minimum-scale 最小缩放比，大于0的数字（最小可以缩放的程度）
user-scalable 用户是否可以缩放，yes或no（1或0）
标准的视口设置：
1）视口宽度和设备保持一致
2）视口的默认缩放比例1.0
3）不允许用户自行缩放
4）最大允许的缩放比例1.0
5）最小允许的缩放比例1.0
2.二倍图
2.1 物理像素＆物理像素比
物理像素就是我们说的分辨率，指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了
PC端页面，1个px 等于1个物理像素的，但是移动端1px不一定等于1物理像素，而且在不同的设备上有所不同
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
PC端和 早前的手机屏幕/ 普通手机屏幕： 1CSS像素 = 1物理像素
Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度
2.2 多倍图
对于一张 50px* 50px 的图片,在手机 Retina屏中打开，按照物理像素比放大倍数，会造成图片模糊
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
通常使用二倍图，因为 iPhone 678的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求 背景图片 注意缩放问题
使用原理：先将图片大小手动设置为原图的一半，然后通过物理像素比在移动端上显示进行二倍放大
/*在iphone8 下面*/
img {
/* 原始图片100*100px */
width: 50px;
height: 50px;
}
我们需要一个50 * 50像素（css像素）的图片 直接放到 iphone8 里面会放大2倍 100 * 100 就会模糊 我们采取的是 放一个100 * 100 图片 然后手动的把这个图片 缩小为 50 * 50 （css像素） 我们准备的图片是我们实际需要的大小的2倍，这就方式就是2倍图
2.3 背景缩放 background-size
background-size 属性规定背景图像的尺寸
backaround-size： 背景图片宽度 背景图片高度；
单位：长度 | 百分比 | cover | contain
cover 把背景图像扩展至足够大，使背景图像完全覆盖背景区域。（图片显示不全）
contain 把图像图像扩展至最大尺寸，使其宽度和高度完全适应内容区域。（父盒子可能无法填满）
/* 1. 只写一个参数 则是宽度 高度省略 会等比例缩放*/
background-size: 500px;
/* 2. 里面的单位可以跟 %，相对于父盒子来说*/
background-size: 50%;
/* 3. cover 要完全覆盖div盒子 可能有部分背景图片显示不全*/
background-size: cover;
/* 4. contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域 */
background-size: contain;
3.移动端开发选择方案
1）单独制作页面（主流）
2）响应式页面（其次） 缺点：制作麻烦，需要花很大精力去调兼容性问题
4.移动端技术解决方案
5.移动端常见布局
移动端布局和以前我们学习的PC端有所区别：
1.单独制作移动端页面（主流）
1）流式布局（ 百分比布局）
2）flex弹性布局（强烈推荐）
3）less+rem+媒体查询布局
4）混合布局
2.响应式页面兼容移动端（其次)
1）媒体查询
2）bootstarp
6.流式布局（百分比布局）
流式布局，就是百分比布局，也称非固定像素布局。
通过把盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式
max-width 最大宽度（max-height 最大高度）
min-width 最小宽度（min-height 最小高度）
section {
width: 100%;
max-width: 980px;
min-width: 320px;
}
7.flex布局
添加flex布局后，可以给行内元素设置宽度和高度，默认情况下所有元素自动一行显示，不换行
7.1 传统布局和flex布局
传统布局：
1）兼容性好
2）布局繁琐
3）局限性，不能在移动端很好的布局
flex弹性布局：
1）操作方便，布局极为简单，移动端应用很广泛
2）PC端浏览器支持情况较差
3）IE11或更低版本，不支持或仅部分支持
建议：
如果是PC端页面布局，我们还是传统布局。
如果是移动端或者不考虑兼容性问题的PC端页面布局 ，我们还是使用flex弹性布局
7.2 布局原理
/*给父盒子添加flex属性*/
div {
display: flex;
}
flex是flexible Box的缩写，意为"弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex 布局。
当我们为父盒子设为flex布局以后，子元素的float、clear和 vertical-align属性将失效。
伸缩布局 =弹性布局 =伸缩盒布局 =弹性盒布局=flex布局
采用Flex 布局的元素，称为Flex 容器 (flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex 项目 (flexitem），简称”项目"。
<style>
div {
display: flex; /*给父盒子添加flex*/
width: 800px;
height: 300px;
background-color: purple;
}
div span { /*添加flex布局后，可以给行内元素设置宽度和高度*/
width: 150px;
height: 250px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
1）div 就是flex父容器。
2）span 就是 子容器 flex项目
3）子容器可以横向排列也可以纵向排列
总结flex布局原理： 就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
7.3 常见父项属性
以下6个属性是对父元素设置的
flex-direction ：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content ：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
7.4 flex-direction
设置主轴的方向
1.主轴与侧轴
在flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴
默认主轴方向就是×轴方向，水平向右
默认侧轴方向就是y 轴方向，水平向下
2.属性值
flex-direction 属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
属性值 说明
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
7.5 justify-content
设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定好主轴是哪个
属性值 说明
flex-start 默认值从头部开始，如果主轴是x轴，则以左到右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴则水平居中）
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间（重要）
<style>
div {
display: flex; /*给父盒子添加flex*/
width: 800px;
height: 300px;
background-color: purple;
flex-direction: row;
/* justify-content：设置主轴上子元素的排列方式 */
justify-content: flex-start;
/* 从尾部开始排列 */
justify-content: flex-end;
/* 让我们子元素居中对齐 */
justify-content: center;
/* 平分剩余空间 */
justify-content: space-around;
/* 先两边贴边，在分配剩余的空间 */
justify-content: space-between;
}
div span {
width: 150px;
height: 250px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
7.6 flex-wrap
设置子元素是否换行
默认情况下，项目都排在一条线（又称” 轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
如果装不下，则项目宽度会缩小，最后平均分布在容器内，不换行
换行后，容器不会因为项目而撑大
属性 值说明
nowrap 默认值，不换行
wrap 换行
7.7 align-items（单行）
设置侧轴上的子元素排列方式
该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单行的时候使用
属性值 说明
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中（ 垂直居中）
stretch 拉伸（默认值）
注意：拉伸，注意子盒子不能设置高度
div {
display: flex;
width: 800px;
height: 500px;
background-color: purple;
flex-direction: row;
justify-content: flex-start;
align-items: stretch; /*拉伸*/
}
div span {
width: 150px;
/* height: 250px; */ /*拉伸，注意子盒子不能设置高度*/
background-color: pink;
margin-top: 10px;
margin-right: 10px;
}
7.8 align-content（多行）
设置侧轴上的子元素的排列方式
设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况，在单行下是没有效果的。
属性值 说明
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stretch 设置子项元素高度平分父元素高度
7.9 flex-flow
flex-flow 属性是flex-direction 和 flex-wrap 属性的复合属性
flex-flow: row wrap;
flex-direction ：设置主轴的方向
flex-wrap：设置子元素是否换行
8.flex布局子项常见属性
flex子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）
8.1 flex 属性
flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。
.item {
flex: <number>; /* default 0 * /
}
已经设置大小的无法分配空间，将所有空间减去已占有的空间就是剩余空间，将所有的flex值加起来就是把剩余空间分成几份，最后flex的值所对应的就越是占有的份数
<style>
ection { /*可以自适应*/
display: flex;
width: 80%; /*总宽度*/
height: 200px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1) { /*有宽度*/
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1; /*剩余空间分成一份，此处占一份*/
background-color: green;
}
section div:nth-child(3) { /*有宽度*/
width: 100px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
8.2 align-self
控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items 属性。
默认值为 auto，表示继承父元素的align-items属性，如果没有父元素，则等同于 stretch。
span:nth-child (2) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
属性值和align-item相同
8.3 order 属性定义项目的排列顺序
数值越小，排列越靠前，默认为0。
注意：和z-index不一样。
<style>
ection {
display: flex;
width: 80%;
height: 200px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
order: -1; /*-1比0小，在第二个孩子前面*/
}
section div:nth-child(2) {
background-color: green;
order: 0;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
</section>
</body>
9.媒体查询
9.1 什么是媒体查询
媒体查询（Media Query)是CSS3新语法。
使用 @media 查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
9.2 语法规范
@media mediatype and|not|only (media feature) {
CSS-Code;
}
用@media 开头 注意@符号
mediatype 媒体类型
关键字and not only
media feature 媒体特性 必须有小括号包含
1. mediatype 查询类型
将不同的终端设备划分成不同的类型，称为媒体类型
值 解释说明
all 用于所有设备
print 用于打印机和打印预览
scree 用于电脑屏幕，平饭电脑智能手切等
2. media feature 媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。 注意他们要加小括号包含
值 解释说明
width 定义输出设备中页面可见区域的宽度
min-width 定义设备中页面最小可见区域亮度
max-width 定义出设备中页面最大可见区域宽度
@media screen and (Max-width: 800px){ /*当屏幕宽度小于800px时*/
body{
background-color: pink;
}
}
@media screen and (max-width: 500px){ /*当屏幕宽度小于500px时*/
body {
background-color: purple;
}
}
9.3 rem 单位
rem (root emn)是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size= 12px;非根元素设置width:2rem;则换成px表示就是24px
p {
/*em相对于父元素 的字体大小来说的*/
width: 10em;
height: 10em;
/*rem 相对于 html元素 字体大小来说的*/
width: 10rem;
height: 10rem;
background-color: pink;
/*rem的优点就是可以通过修改htm1里面的文字大小来改变页面中元素的大小可以整体控制 */
}
优点：可通过html页面的大小伸缩对字体的大小同时进行伸缩
9.4 媒体查询+rem实现元素动态大小变化
rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
当屏幕宽度到达某一值时，改变html字体大小，通过rem单位对元素大小进行修饰，就可以实现在不同设备宽度下，页面元素大小动态变化
<head>
<style>
@media screen and (min-width: 320px) {
html {
font-size: 50px;
/*改变html字体大小*/
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
section { /*通过rem单位，动态改变页面元素大小*/
height: 1rem;
/*1rem=1*font-size*/
font-size: .5rem;
background-color: green;
color: #fff;
}
</style>
</head>
<body>
<section>
<div>小周</div>
<div>和</div>
<div>小王</div>
</section>
</body>
9.5 引入资源（理解）
当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。
原埋，就是直接在link中判断设备的尺寸 ，然后引用不同的css文件。
1.语法规范
<link rel="stylesheet" media=" mediatype and|not|only (media feature)" href="mystylesheet.css">
例如：
<link rel="stylesheet" href="xiaowang.css" media="screen and (min-width:32epx)">
/*建立一个名为xiaowang.css的文件，把文件中代码与本文件进行连接*/
10.Less 基础
10.1维护 css 的弊端
CSS 是一门非程序式语言，没有变量、 西数、SCOPE（作用域）等概念
1）CSS 需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。
2）不方便维护及扩展，不利于复用。
3）CSS 没有很好的计算能力
4）非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。
10.2 Less 介绍
Less (Leaner Style Sheets 的缩号）是一门CSS 扩展语言，也成为CSS预处理器。
做为CSS的一种严三式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在 CSS 的语法基础之上，引入了变量，Mixin（ 混入），运算以及函数等功能，大人简化了CSS 的编写，并且降低了CSS 的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。
常见的CSS预处理器：Sass、Less、Stylus
10.3 Less 使用
我们首先新建一个后级名为less的文件，在这个less文件里书写 less语句。
1）Less变量
2）Less 编译
3）Less嵌套
4）Less运算
10.3.1 Less变量
变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
/*@变量名：值;*/
@color: yellow;
/*使用时*/
body{
background-color: @color;
}
变量命名规范：
1）必须有@为前缀
2）不能包含特殊字符
3）不能以数字开头
4）区分大小写
10.3.2 Less 编译
本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则 ，这些规则最终会通过解析器，编泽生成对应的css文件。
所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。
vocode Less 插件
Easy LESS 插件用来把less文件编译为css文件
安装完毕插件，只要保存—下Less文件，会自动生成css文件
10.3.3 Less 嵌套
我们经常用到选择器的嵌套
div span { /*div里面的span*/
width: 300px;
}
Less 嵌套写法有所不同：
div {
span {
width: 300px;
}
}
伪类选择器前面要加&符号：
div {
&::before {
content: "";
}
}
/*在css文件中显示：*/
div::before{
content:"";
}
/*在css文件中显示*/
div span {
color: yellow;
}
div::before {
content:"";
}
/*在Less文件中可以这样写*/
div {
span {
color: yellow;
}
&::before {
content: "";
}
}
10.3.4 Less运算
@border: 5px + 5; /*进行运算*/
div {
width: 200px;
height: 200px;
border: @border solid red; /*直接使用*/
}
小技巧：
如果需要 82px的图片，但是 html字体大小为50 px，则只需要设置图片大小为 82/50 rem
重点：
1）我们运算符的左右两侧必须敲一个空格隔开
2）两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准
3）两个数参与运算，如果2个数都有单位，而且不一样的单位 最后的结果以第一个单位为准
