前言
书接上回，没有看我写的手把手教你系列之CSS基础-上的同学赶紧去看一下吧！本次我们要讲解的是CSS3动画系列以及非常重要的移动web适配的四种方案，分别是流式布局、flex布局、rem布局以及栅格系统。
正文
动画定义
<style>
div {
width: 100px;
height: 100px;
background-color: aquamarine;
/* 动画名称 */
animation-name: move;
/* 动画花费时长 */
animation-duration: 2s;
/* 动画速度曲线 */
animation-timing-function: ease-in-out;
/* 动画等待多长时间执行 */
animation-delay: 2s;
/* 规定动画播放次数 infinite: 无限循环 */
animation-iteration-count: infinite;
/* 是否逆行播放 */
animation-direction: alternate;
/* 动画结束之后的状态 */
animation-fill-mode: forwards;
}
@keyframes move{
0% {
transform: translate(0px)
}
100% {
transform: translate(500px, 0)
}
}
div:hover {
/* 规定动画是否暂停或者播放 */
animation-play-state: paused;
}
</style>
/*简写形式 animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
动画形式2
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateX(-45deg)
}
移动web适配-通用技巧
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
这个视口不管是哪种适配一定要加在head标签中
一般移动web参考iphone6的尺寸设计，750*1334.这样美工需要提供二倍图，因为在手机端不是1px就等于手机上的一个像素，图片会缩放。所以我们可以利用二倍图先缩小原来的一半，这样放到手机上他就是正常的。
background-size: 背景图片宽度 背景图片高度;
移动端 CSS 初始化推荐使用 normalize.css
Normalize.css：保护了有价值的默认值
Normalize.css：修复了浏览器的bug
Normalize.css：是模块化的
Normalize.css：拥有详细的文档
移动端大量使用了盒子模型
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;
盒子模型的padding和border都是在自己的盒子中跟传统的盒子模型不一样，这样布局不容易因为内边距和border撑开盒子导致布局错乱。
移动端特殊样式
/*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适配--流式布局
body {
width: 100%;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
color: #666;
line-height: 1.5;
}
其实说到底流式布局的适配就是利用了width不指定具体的px值，通过设置百分比来达到适配的效果。把握住这一点就可以很好的使用流式布局的适配。
移动web适配--flex
- flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
- 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
- flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
注意：PC端尽量不要使用，会有兼容性问题
父布局常见属性
- flex-direction：设置主轴的方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-content：设置侧轴上的子元素的排列方式（多行）
- align-items：设置侧轴上的子元素排列方式（单行）
- flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
子布局常见属性
- flex子项目占的份数 （最常用）
- align-self控制子项自己在侧轴的排列方式
- order属性定义子项的排列顺序（前后顺序）
.item {
flex: <number>; /* 默认值 0 */
}
span:nth-child(2) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
.item {
order: <number>;
}
移动web适配--rem(推荐)
rem单位
rem (root em)是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}
rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。
媒体查询
- 使用 @media查询，可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
html {
font-size: 50px;
}
@media screen and (min-width: 320px){
html {
font-size: 1rem;
}
}
@media screen and (min-width: 360px) {
html {
font-size: 2rem;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 3rem;
}
}
Less基础
当然通过rem单位和媒体查询来达到适配是可以的，但是我们不可能用计算器去算设计图上每个px转换成rem是多少。如果css能像很多后端语言有函数或者加减乘除就好了，这就是less的出现的目的。当然还有sass这里我们选择使用less语法。首先要下载node,然后再下载less，然后配置less。我用的是webstorm，配置信息可以网上搜罗一下这里就不介绍啦。因为浏览器是不认识less语法的最终less还是要被转换成css供页面引入使用。
@变量名:值;
@color: pink;
嵌套
// 将css改为less
#header .logo {
width: 300px;
}
#header {
.logo {
width: 300px;
}
}
交集|伪类|伪元素选择器） ，利用&进行连接
a:hover{
color:red;
}
a{
&:hover{
color:red;
}
}
运算
/*Less 里面写*/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/*生成的css*/
div {
border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;
- 乘号（*）和除号（/）的写法
- 运算符中间左右有个空格隔开 1px + 5
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就取该单位
rem适配的两种技术方案：
1.less+rem+媒体查询
2.lflexible.js+rem
适配流程
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
③每一份作为html字体大小，这里就是50px
④那么在320px设备的时候，字体大小为320/15就是 21.33px
⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
⑥比如我们以750为标准设计稿
⑦一个100100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1
⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1
⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
总结：
①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
②屏幕宽度/划分的份数就是 htmlfont-size 的大小
③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小
移动web适配--栅格系统
其实说到底栅格系统也是借助媒体查询监测不同的屏幕尺寸实现的，这里需要借助一个开源的前端框架Bootstrap
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
- 按照不同屏幕划分为1~12 等份
- 行（row） 可以去除父容器作用15px的边距
- xs-extra small：超小； sm-small：小； md-medium：中等； lg-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, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<!--[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>Title</title>
<style>
.row>div {
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-8">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</body>
</html>
简单效果
结语
打完收工，下一篇我们将进入js的学习，敬请期待！！！
