前端学习：hover.css,视口，媒体查询，vh，vw，rem，em，rem+媒体查询响应式，less，sass，scss（css预处理语言），适配原理

1.hover.css插件

Hover.css - A collection of CSS3 powered hover effects

                鼠标悬停动画插件        可以配合矢量图标库使用（元素必须设置为inline-block才有效）

通过link标签引入hover.css文件 给控件加类名 使用       会自动将元素转换为行内块元素

<div class="hvr-grow-rotate"></div>
    <div class="hvr-fade"></div>
    <div class="hvr-float-shadow"></div>

    <i class="fa fa-address-book"></i>

    <br>

    <!-- 动态的图标  -->
    <span class="hvr-icon-forward">
        图标: <i class="fa fa-address-book hvr-icon"></i>
    </span>

    <!-- 父级必须有hvr-icon-xxx   子元素必须拥有 hvr-icon类  -->
    <a href="#" class="hvr-icon-forward">
        Icon Forward
        <i class="fa fa-chevron-circle-right hvr-icon"></i>
    </a>

    <!-- 阿里文字图标库  icon-yanjing_yincang-->
    <!-- 使用阿里文字图标 要保证动画的元素 为inline-block -->
    <a href="#" class="hvr-icon-forward">
        Icon Forward
        <i class="iconfont icon-yanjing_yincang hvr-icon" style="display:inline-block"></i>
    </a>

2.视口    viewport

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport就是设备的屏幕上能用来显示我们的网页的那一块区域 (移动端有效 pc端无效)

分为 可见视口，布局视口，理想视口

一般只用理想视口：让宽等于设备的宽

3.媒体查询：

       媒体查询：  实现响应式布局的一种技术 

      响应式布局：根据设备大小的不同，展示不同的网页效果

响应式：既支持pc端  又支持移动端

一般情况下做法：做两套页面  1.pc端使用，2.移动端使用（技术难度低，节约开发成本）

 关键字 修饰符   媒体特质   修饰符  (表达式)

        @media not|only mediatype and (expressions) {

            CSS 代码...;

        }

/* 屏幕大小

        超小型屏幕(手机)  768px 以下

        小屏幕(平板)  768 - 992px

        中等屏幕(显示器 老破旧) 992 - 1200

        大型屏幕(当代计算机) 1200 以上

        */

        /* 表达式 一般使用  最大值 最小值*/

 @media screen and (max-width:768px){
            div{
                width: 200px;
                height: 200px;
                background: red;
            }
        }

        @media screen and (max-width:992px) and (min-width:768px){
            div{
                width: 400px;
                height: 400px;
                background: yellowgreen;
            }
        }

4.vh,vw     相对于视口的百分比单位

        % 相对于父元素     vw 和 vh 类似于 % 相对于视口

实现响应式：

1.%  2.vw,vh 3.flex布局 4.rem  5 .bootstrap  栅格系统(对媒体查询的封装)

前四种需要配合媒体查询来实现响应式

5.  em，rem

em  ：相对于父元素的字体大小，em不能作为移动端适配的单位

rem ：（root em ）相对于根元素的字体大小

通过安装 vscode中的   px to rem & rpx & vw (cssrem)  插件实现rem和px单位的转换

通过 rem+媒体查询实现响应式（移动端适配）：

        通过媒体查询动态的改变根元素的字体大小，元素宽高的单位为rem

  /* 动态的改变根元素的字体大小 */

        @media screen and (max-width:768px){
            html {
                font-size: 50px;
            }
        }

        @media screen and (min-width:768px){
            html {
                font-size: 100px;
            }
        }

        div{
            width: 2rem;
            height: 2rem;
            background: red;
        }

6.适配原理

适配多个屏幕尺寸   通过媒体查询设置html 根字体大小

        移动端采用设计稿为750px的iPhone6作为原型图  把屏幕等分为多少份（10，12，15，20）

        pc端   1080px 1200px  作为原型图

适配多个屏幕尺寸  查询常用的屏幕尺寸  

          320  350 375 414 480 640 720  750

.px 转换为 rem 我们通过 插件完整     现在我的是以750px 为设计稿  15等分  所以根字体大小为50px        开发中可能并不是这个等分  要记得修改 px to rem插件中的 根字体大小

7.less sass scss

        less sass scss  统称为 css预处理语言

less文档：https://less.bootcss.com/#%E6%A6%82%E8%A7%88

sass文档：https://www.sass.hk/guide/

1. 可以嵌套使用，2.定义变量

vscode中下载插件 EASY LESS 写完.less文件后会自动解析生成对应的css文件，将css文件用link标签引入项目中使用

 /* scss  用括号进行分隔 */

        /* div{

            span {

            }

        } */

        /* sass */

        /* div

            div的样式

            span

                span的样式 */

less用@声明变量，scss用$声明变量

@color:red;
@w:50px;

div{
    span{
        color: @color;
        font-size: @w;
    }
    &:hover{
        background: green;
    }
}