H5-C3-移动端布局

Html5-CSS3

1. 多媒体标签

1.1 audio 音频标签

使用

<audio src="小猪佩奇.mp3" autoplay> </audio>

支持的格式

格式	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

1.2 video 视频标签

使用

  <video src="小猪佩奇.mp4" autoplay controls ></video>

支持的格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

video常用属性、方法、事件

属性	方法	事件
duration 视频播放时长	play 播放	canplay 视频加载完毕 准备播放
currentTime 当前播放进度	pause 暂停	timeupdate 播放时-持续触发
volume 音量大小

source标签

可以通过在多媒体标签内加入source标签，用来指定多个播放路径，当第一个source标签的路径出错时，自动会切换到第二个source标签

    <!-- 当1.mp4出错时，自动切换到2.mp4 ... -->
    <video >
      <source src="1.mp4">
      <source src="2.mp4">
      <source src="3.mp4">
    </video>

object-fit属性

当video标签视频内容宽度没有铺满video标签时，可以在css写上 该属性即可

    video {
      /* 让视频内容铺满整个video标签 */
      object-fit: fill;
    }

1.3 公共属性

以下属性 是要直接写在标签上的 如 autoplay controls

<video src="小猪佩奇.mp4" autoplay controls ></video>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

2. 伪类选择符

2.1. E:first-child

匹配父元素的第一个子元素E。

  <style>
    ul li:first-child{
      background-color: red;
    }
  </style>

  <ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
    <li>列表项四</li>
  </ul>

E:last-child 则是选择到了最后一个li标签

2.2. E:nth-child(n) E:nth-last-child(n)

匹配到父元素的第n个元素 或者 是倒数第n个元素

相比 E:first-child 则要强大了不少，功能如下 （死记硬背是最好的）

• 匹配到父元素的第2个子元素

  ul li:nth-child(2){}

• 匹配到父元素的倒数第2个子元素

  ul li:nth-last-child(2){}

• 匹配到父元素的序号为奇数的子元素

  ul li:nth-child(odd){} odd 是关键字 奇数的意思（3个字母 ）

• 匹配到父元素的序号为偶数的子元素

  ul li:nth-child(even){} even（4个字母 ）

• 匹配到父元素的前3个子元素

  ul li:nth-child(-n+3){}

  选择器中的 n 是怎么变化的呢？

  因为 n是从 0 ，1，2，3… 一直递增

  所以 -n+3 就变成了

  • n=0 时 -0+3=3
  • n=1时 -1+3=2
  • n=2时 -2+3=1
  • n=3时 -3+3=0
  • …

• 匹配到父元素的后3个子元素

  ul li:nth-last-child(-n+3){}

2.3 E:nth-of-type(n)

这里只讲明 E:nth-child(n) 和 E:nth-of-type(n) 的区别 剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推导即可

  <style>
    ul li:nth-child(2){
      /* 字体变成红色 */
        color: red;
    }

    ul li:nth-of-type(2){
      /* 背景变成绿色 */
      background-color: green;
    }
  </style>


  <ul>
    <li>列表项一</li>
    <p>乱来的p标签</p>
    <li>列表项二</li>
    <li>列表项三</li>
    <li>列表项四</li>
  </ul>

也就是说

• E:nth-child(n) 匹配父元素的第n个子元素E。
• E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。

3. 属性选择符 了解

1. E[att] 选择具有att属性的E元素。
2. E[att=“val”] 选择具有att属性且属性值等于val的E元素。
3. E[att^=“val”] 选择具有att属性且属性值为以val开头的字符串的E元素。
4. E[att$=“val”] 选择具有att属性且属性值为包含val的字符串的E元素
5. E[att*=“val”] 选择具有att属性且属性值为包含val的字符串的E元素。

4. 伪元素选择器 了解

4.1 伪元素种类

1. E::before 在E元素前插入一个元素
2. E::after 在E元素后插入一个元素
3. E::first-letter 选择到了E容器内的第一个字母
4. E::first-line 选择到了E容器内的第一行文本

4.2 h5写法和传统写法区别 了解

1. 单冒号 E:before
2. 双冒号 E::before
3. 浏览器对以上写法都能识别 双冒号 是h5上语法的规范

4.3 伪元素的注意事项 了解

想要让伪元素有效，必须遵循以下注意事项

1. 伪元素只能给双标签加 不能给单标签加
2. 伪元素的冒号前不能有空格 如 E ::before 这个写法是错误的
3. 伪元素里面必须写上属性 content:"";

5. 2D转换（变换）transform

5.1 2d移动 translate

2d移动是2d转换里面的一种功能，可以改变元素在页面中的位置，类似 定位

使用2d移动的步骤：

1. 给元素添加 转换属性 transform
2. 属性值为 translate(x,y) 如 transform:translate(50px,50px);

  div{
    transform: translate(50px,50px);
  }

5.2 2d旋转 rotate

2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
使用步骤：

1. 给元素添加转换属性 transform
2. 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

div{
	transform: rotate(0deg);
}

3. 旋转中心点 transform-origin: x y;

   **注：**x y默认的中心点是元素的中心点(50% 50%),还可以给xy设置像素或者方位

5.3 2d缩放 scale

div{
	transform: scale(宽的倍数，高的倍数);
	transform: scale(x,y);//综合写法
}

6.动画

/* 1 声明动画函数 */
@keyframes ani_div {      
    0% {        
    	width: 100px;        
    	background-color: red; 
    }      
    50% {       
        width: 150px;       
        background-color: green; 
    }      
    100% {       
        width: 300px;        
        height: 300px;       
        background-color: yellow;
    }
}
 
div {      
	width: 200px;     
	height: 200px;      
	background-color: aqua;     
	margin: 100px auto;      
	animation-name: ani_div;  /* 2 调用动画 */       
	animation-duration: 2s; /* 持续时间 */ 
    animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out;/*速度曲线 匀速/慢快慢/慢快/快慢/慢快慢*/
    animation-delay: 0s;/*延迟时间*/
    animation-iteration-count: 2/ infinite 为无限循环 ;/*循环次数*/
    /*animation-direction:循环方向*/
    animation-fill-mode:forwards/backwards/both;/*等待或者结束的状态 100样式/0%样式/同时*/
    animation-play-state: running/paused;/*播放/暂停*/
}

/*多个动画的写法，用，隔开*/
animation: name duration timing-function delay iteration-count direction fill-mode,
animation: name duration timing-function delay iteration-count direction fill-mode;

 /*动画结束事件animationend*/
/*元素在动画结束之后，会自动触发的事件 animationend*/
var div = document.querySelector("div");    
div.addEventListener("animationend", function () {      
    console.log("div的动画结束之后，触发");
})

7. 3D转换 transform

1. 3D移动

   1. transform:translate3d(x,y,z)  其中 x y z 分别指要移动的轴的方向的距离 
   2. translform:translateX(100px)  仅仅是移动在x轴上移动 
   3. translform:translateY(100px)  仅仅是移动在Y轴上移动 
   4. translform:translateZ(100px)  仅仅是移动在Z轴上移动 
   
   
   /* 父元素 */    
   body {     
   /* 视距 */     
   	perspective: 1000px;/*perspertive 就是用来设置 人 和 物体 的距离 */
   }
    
   /* 目标 */   
   div {      
   	width: 200px;      
   	height: 200px;      
   	background-color: aqua;      
   	margin: 100px auto;      
   	/* z轴的移动 */      
   	transform: translateZ(0px);
   }
   

2. 3D旋转 rotate3d

   左手准则

   1. 左手的手拇指指向 x轴的正方向
   2. 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了

   transform:rotateX(45deg); /*沿着x轴正方向旋转 45度 */
   transform:rotateY(45deg); /*沿着y轴正方向旋转 45deg */
   transform:rotateZ(45deg); /*沿着Z轴正方向旋转 45deg*/ 
   transform:rotate3d(x,y,z,deg); /*沿着自定义轴旋转 deg为角度*/
   

3. 3D缩放 scale3d

   transform: scale3d(1 ,1,2);  /*宽，高 缩放一倍，厚度放大两倍 */
   transform: scaleX(1); /*只缩放宽 */
   transform: scaleY(1); /*只缩放高 */
   transform: scaleZ(1); /*只缩放厚 */
   

4. 3D呈现 transform-style

   代码写给父元素

   transform-style: flat;  /*平面模式  -  不开启3维立体环境 */
   transform-style: preserve-3d;  /*3维立体环境*/
   

8.背景缩放background-size

background-size: 背景图片宽度 背景图片高度
单位： 长度|百分比|cover|contain; 
cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 

9.渐变

div {
    background: -webkit-linear-gradient(left,biue,skyblue)//起始方向，颜色，颜色
}

10.移动端大量使用 CSS3盒子模型box-sizin

传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding

CSS3盒子模型： 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding

也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了

/*CSS3盒子模型*/ box-sizing: border-box; 

移动端布局

flex布局

display: flex;

**父项常见属性 **

1.flex-direction：设置主轴的方向

flex-direction: row/row-reverse/column/column-reverse;/*左->右/右->左/上->下/下->上*/

2.justify-content 设置主轴上的子元素排列方式

flex-start	默认值，头部开始（左对齐）
flex-end	尾部开始（右对齐）
center	主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

3.flex-wrap设置是否换行

• nowrap 不换行
• wrap 换行

4.align-items 设置侧轴上的子元素排列方式（单行 ）

• flex-start 从头部开始
• flex-end 从尾部开始
• center 居中显示
• stretch 拉伸 （子元素没有高度）

5.align-content 设置侧轴上的子元素的排列方式（多行）

flex-start	默认值，头部开始（左对齐）
flex-end	尾部开始（右对齐）
center	主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间
stretch	设置子项元素高度平分父元素高度
align-self	控制子项自己在侧轴上的排列方式（在子元素自己身上写）
order	定义项目的排列顺序，数值越小越靠前（默认值0）

rem布局

//common.less
a {
    text-decoration: none;
}
// 一定要写到最上面
html {
    font-size: 50px;
}
// 我们此次定义的划分的份数 为 15
@no: 15;
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @no;
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @no;
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: 375px / @no;
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: 384px / @no;
    }
}

// 400
@media screen and (min-width: 400px) {
    html {
        font-size: 400px / @no;
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: 414px / @no;
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: 424px / @no;
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: 480px / @no;
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: 540px / @no;
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: 720px / @no;
    }
}

// 750
@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @no;
    }
}

//index.less
// 首页的样式less文件
@import "common";
// @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面
// link 是把一个 样式文件引入到 html页面里面
body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background: #F2F2F2;
}
// 页面元素rem计算公式： 页面元素的px / html 字体大小 50
// search-content
@baseFont: 50;
.search-content {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    height: 88rem / @baseFont;
    background-color:#FFC001;
    .classify {
        width: 44rem / @baseFont;
        height: 70rem / @baseFont;
        margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
        background: url(../images/classify.png) no-repeat;
        // 背景缩放
        background-size: 44rem / @baseFont 70rem / @baseFont;
    }
    .search {
        flex: 1;
        input {
            outline: none;
            width: 100%;
            border: 0;
            height: 66rem / @baseFont;
            border-radius: 33rem / @baseFont;
            background-color:#FFF2CC;
            margin-top: 12rem / @baseFont;
            font-size: 25rem / @baseFont;
            padding-left: 55rem / @baseFont;
            color: #757575;
        }
    }
    .login {
        width: 75rem / @baseFont;
        height: 70rem / @baseFont;
        line-height: 70rem / @baseFont;
        margin: 10rem / @baseFont;
        font-size: 25rem / @baseFont;
        text-align: center;
        color: #fff;

    }
}

// banner
.banner {
    width: 750rem / @baseFont;
    height: 368rem / @baseFont;
    img {
        width: 100%;
        height: 100%;
    }
}
// ad
.ad {
    display: flex;
    a {
        flex: 1;
        img {
            width: 100%;
        }
    }
}
// nav
nav {
    width: 750rem / @baseFont;
    a {
        float: left;
        width: 150rem / @baseFont;
        height: 140rem / @baseFont;
        text-align: center;
        img {
            display: block;
            width: 82rem / @baseFont;
            height: 82rem / @baseFont;
            margin: 10rem / @baseFont auto 0;
        }
        span {
            font-size: 25rem / @baseFont;
            color: #333;
        }
    }
}

less运算

1rem	html字体的大小
页面元素的rem值	页面元素值(px)/(屏幕宽度/划分的份数)
html中font-size的大小	屏幕宽度/划分的份数
页面元素的rem值	页面元素值(px)/html中font-size的大小

响应式布局

设置宽度为100%	超小屏设备（手机）	<768px
设置宽度为750px	小屏设备（平板）	‘>’=768px-<992px
设置宽度为970px	中等屏幕（桌面显示其）	‘>’=992px-<1200px
设置宽度为1170px	宽屏设备（大桌面显示器）	‘>’=1200px