em是相对父元素的单位，比如父元素字体大小10px，那么子元素写2em就是2倍的父元素=>20px
注意：浏览器默认字体最小12px

rem是相对根父元素的单位，如根父元素字体大小10px，子元素2rem表示20px,子元素的子元素4px表示40px

viewPort视口

调试成手机模式时
尺寸 选择自适应 可以进行调试
vw viewPort width 把 宽度 分为100份 100vw = 全屏宽度
50vw 不管屏幕多大 始终 占一般
vh height

媒体查询

rem相对根元素的大小来确定子元素大小的，但是不能跟随屏幕的尺寸而变化（手机端）
所以利用媒体查询限定屏幕宽度来设置相应的文字大小

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>媒体查询</title>
  9.     <!-- 
  10.   rem 是相对根元素的 大小 但是  不能随着屏幕尺寸变化
  11.             媒体查询  查询 设备的信息  常用的就是
  12.      -->
  13.     <style>
  14.         @media screen and (max-width:500px) {
  16.             /*屏幕宽度  小于 500px进来  */
  17.             html {
  18.                 font-size: 10px;
  19.             }
  21.             div {
  22.                 font-size: 1rem;
  23.             }
  24.         }
  26.         @media screen and (min-width:520px) and (max-width:720px) {
  28.             /*屏幕宽度  520px  720进来  */
  29.             html {
  30.                 font-size: 100px;
  31.             }
  33.             div {
  34.                 font-size: 1rem;
  35.             }
  36.         }
  38.         @media screen and (min-width:720px) and (max-width:920px) {
  40.             /*屏幕宽度 720  920进来  */
  41.             html {
  42.                 font-size: 200px;
  43.             }
  45.             div {
  46.                 font-size: 1rem;
  47.             }
  48.         }
  49.     </style>
  50. </head>
  52. <body>
  53.     <div>watch me</div>
  54. </body>
  56. </html>

第三方

引入写好的第三方的JS文件，例如监听浏览器大小来设置对应的字体大小

弹性布局

flex
/ 设置弹性盒子 /
display: flex;

  1.         /* 纵向 竖着 */<br />            /* flex-direction: column; */
  3.         /* 是否换行 */<br />            /* flex-wrap: nowrap; */

order：改变标签的顺序 结构不变，不影响JS的逻辑

li:first-child {
/ 指定顺序 但是 标签结构的顺序 并没有变 所以不影响相关的JS 逻辑
默认是 order :0
数字越大越靠后，不是真实地序号
/
order: 5;
}
li:nth-child(2) {
order: 4;
}

居中：/ 调整主轴方向上的 对齐方式 /
justify-content: center;
/ 侧轴 和主轴垂直相交 的方向 /
align-items: center;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>居中</title>
  8.     <style>
  9.         /* 水平  和 竖直 都居中 */
  10.         div{
  11.             height: 100px;
  12.             border: 1px solid red;
  14.             display: flex;
  16.             /*  主轴 就是 direction 的方向 */
  17.             /* 调整主轴方向上的 对齐方式 */
  18.             justify-content: center;
  19.             /* 侧轴 和主轴垂直相交  的方向 */
  20.             align-items: center;
  22.             /* -o-flex: 
  23.              -ms-flex: ;
  24.             -moz-flex: ; */
  25.         }
  26.         span{
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div>
  33.         <span> 居中</span>
  34.     </div>
  35. </body>
  36. </html>

移动端：

触摸：

之所以不是点击事件，是因为点击事件会延迟300MS，所以移动端专门用自己的移动端事件
touchstart touchmove touchend touchcancel（touchcancel一般来电话点击取消的触摸事件）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>触摸</title>
  8.     <script src="./yzs.tools.js"></script>
  9.     <style>
  10.         #box{
  11.             width: 300px;
  12.             height: 300px;
  13.             /* 颜色
  15.             rgb(r,g,b)
  16.             rgba  
  17.             英文
  18.             十六进制 ff 00 00   RGB
  19.             hsl(hue, saturation, lightness)
  20.             hsla(hue, saturation, lightness, alpha)
  21.             */
  23.             background-color:#0000FF;
  24.             margin: 0 auto;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div id="box"></div> 
  30.     <script>
  32.         let box =  document.querySelector("#box")
  33.         // 点击事件 延迟 300ms ,所以移动端专门用自己 移动端事件
  34.         // box.addEventListener("click",function(){
  35.         //     console.log("click------")
  36.         // })
  37.         // 移动端 一般 是触摸 
  39.         box.addEventListener("touchstart",function(e){
  40.             // 兼容性的写法
  41.             let event = e || window.event
  42.             box.style.borderRadius = "50%"
  43.             console.log("touchstart",event)
  44.             // PC端   是在targert里面存储
  45.             // 移动端 是在touches 里面  为什么+s 是数组
  46.             // 移动端可以 多个手指 同时点击
  47.            // 获取手指点击的位置
  48.             console.log("位置X:",event.touches[0].clientX)
  49.         })
  50.         box.addEventListener("touchmove",function(){
  51.             console.log("move")
  52.             // box.style.backgroundColor = "pink"
  53.             box.style.backgroundColor =   randomColor()
  54.         })
  55.         box.addEventListener("touchend",function(){
  56.             console.log("end")
  57.             box.style.borderRadius = 0
  59.         })
  61.         //  来电话  语音 
  62.         box.addEventListener("touchcancel",function(){
  63.             console.log("cancel")
  64.         })
  65.     </script>
  66. </body>
  67. </html>

zepto相当于移动端的小型的JS库

动画：

animation: name1 10s infinite;

  1.  .move {
  2.             width: 30px;
  3.             height: 30px;
  4.             /* 
  5.             动画  名字 时长 重复次数
  6.                 时长 一定要带单位 
  7.                 infinite 无限次重复
  8.             */
  9.             animation: name1  10s   infinite;
  10.         }
  11.         /* 关键帧动画 */
  12.         @keyframes name1 {
  13.             0%{
  14.                 width: 30px;
  15.                 height: 30px;
  16.                 background-color: green;
  17.             }
  18.             20%{
  19.                 width: 100px;
  20.                 height: 100px;
  21.                 background-color: yellow;
  22.             }
  23.             100%{
  24.                 width: 500px;
  25.                 height: 500px;
  26.                 background-color: red;
  27.                 border-radius: 50%;
  28.             }
  29.         }
  1.  <title>animation 拆解</title>
  2.     <style>
  3.         .move {
  4.             width: 30px;
  5.             height: 30px;
  6.             background-color: orange;
  7.             /* 动画名称 */
  8.             animation-name: animation;
  9.             /* 动画时长 */
  10.             animation-duration: 5s;
  11.             /* 动画结束后的状态 */
  12.             animation-fill-mode: forwards;
  13.             /* 动画播放次数 */
  14.             animation-iteration-count: 1;
  15.             /* 延迟时间 */
  16.             /* animation-delay: 5s; */
  17.             /* 动画 反向 */
  18.             animation-direction: alternate;
  19.             /* 贝塞尔曲线 */
  20.             animation-timing-function: ease-in;
  21.         }
  23.         .move:hover {
  24.             /* 动画播放状态 */
  25.             animation-play-state: paused;
  26.         }
  28.         /* 关键帧动画 */
  29.         @keyframes animation {
  30.             0% {
  31.                 width: 40px;
  32.                 height: 40px;
  33.             }
  35.             100% {
  36.                 width: 300px;
  37.                 height: 300px;
  38.                 background-color: red;
  39.                 border-radius: 50%;
  40.             }
  41.         }
  42.     </style>
  43. </head>
  45. <body>
  46.     <div class="move"></div>
  47. </body>

animate（）
参数1: {} 需要进行动画的 属性 和值
参数2: 动画持续时间
参数3: 运动速率 贝塞尔曲线
参数4: 动画结束时候的回调函数
参数5: 延迟时间

  1. $("div").click(function(){
  2.             $(this).animate({
  3.                 marginTop:"100px",
  4.                 borderRadius:"10px"
  5.             },5000,"linear",function(){
  6.                 $(this).html("结束了,代码简单,怎么想出来的难")
  7.             },2000)
  8.         })

过度动画：
动画分为2种：关键帧动画 —》 进行关键帧的设置
过渡动画—》补间动画
当前元素 只要有”属性” 发生变化时,就可以进行平滑的过渡
自己补充了开始 到结束中间的过程,所以叫补间动画

  1.  <style>
  2.          .show{
  3.              width: 100px;
  4.              height: 100px;
  5.              margin: 0 auto;
  6.              background-color: orange;
  8.              /* 过渡动画 动画的属性   时长  延迟时间  贝塞尔 */
  9.              transition: all  5s;
  10.          }
  11.          .show:hover{
  12.                 width: 200px;
  13.                 height: 200px;
  14.                 border-radius: 50%;
  15.                 background-color: yellowgreen;
  16.          }
  17.      </style>

事件：

tap 事件相当于 pc 浏览器中的 click 效果
tap :单击事件
doubleTap ：双击事件
longTap ：长按事件
swipe 清扫事件
swipeLeft ：左（）清扫事件（swipeRight,swipeUp,swipeDown）

私有前缀

浏览器自己支持一些比较超前的技术 比如 flex 圆角
> 早期的时候 w3c标准 是不支持的
> 但是为了这个用户体验 某些浏览器自己兼容
>-o-flex: 欧朋 Opera
>-ms-flex: ; IE
>-moz-flex: ; 火狐 FirFox
>-webkit-flex chrome safari(Mac自带的)

短路

image.png