9.21笔记

一、calc()函数

 calc()函数
                动态计算长度值
                符号前后加空格

                用于动态计算长度值，值灵活
        css3新增功能
        任何长度值都可以使用calc()函数进行计算
        calc()函数支持 "+" "-" "*" "/" 运算；
        calc()函数使用标准的数字运算优先级原则
        运算符前后都需要保留一个空格
        语法：
            calc(表达式)

二、transition属性

        属性：
        1.transition-proterty
         css样式：参与过渡的css属性名称|all表示所有属性
         2.transition-duration
          动画执行时间：默认0s，s|ms（毫秒） 1s=1000ms
        3.transition-timing-function
          速度类型
          1.linear 相同的速度从开始到结束，也就是匀速
          2.ease 默认值 慢速度开始--速度变快--慢速度结束
          3.ease-in 慢速度开始的过渡效果，也就是以低速度开始
          4.ease-out 慢速度结束的过渡效果，也就是以低速结束
          5.ease-in-out 以慢速度开始和结束的过渡效果
        4.transition-delay
          延迟时间：默认0s，单位s|ms
          注意：必须设置transition-duration属性，否则执行时间为0，不会产生过渡效果

三移动端项目

         终端分为：
           pc：电脑
           移动端：各类手机
           ipad：平板

        移动端项目不能用固定单位：px
        因为手机大小不一致，如果元素尺寸固定，在大屏幕手机显示小，在小屏幕手机显示大
        so，移动端项目要用相对单位
            百分比
            rem 重要
            vw
            vw+rem

四、布局视口

     布局视口：css可以设置视口
        移动端设备默认的viewport，css布局写的太小，一般是980px（不写viewpoint代码演示）
        移动设备的浏览器都默认设置了一个viewport元标签，定义了一个虚拟布局视口，布局视口使视口与移动端浏览器屏幕宽度完全独立开。css布局将会根据他来计算，并被他约束

五、理想视口

      <meat name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
      创建一个虚拟窗口，窗口宽度为设备宽，初始缩放比为1倍，同时不允许用户手动缩放
    content属性：
           width 虚拟窗口的屏幕宽度 divice-width 设备宽
           initial-scale 页面初始缩放比 取值：1-10
           user-scalable 是否允许用户手动缩放
           user-scalable=no 不允许用户手动缩放
           user-scalable=yes 允许用户手动缩放，默认值
           maximum-scale 最大缩放比 取值：1-10
           minimum-scale 最小缩放比 取值：1-10
           height：设置viewport的高度（我们一般而言并不能用到）

           常见的手机设置的大小
           iphone4/5/SE    320
           iphone6/7/8   375
           iphone6plus、 iphone7plus、 iphone8plus  414

六、流式布局

        宽度使用百分比，高度使用px
        优缺点：
            可以实现自适应

            大量使用百分比，会造成页面兼容性问题
            可能拉长元素

七、 rem布局：

    rem布局：
           rem是相对单位，相对html的font-size的大小
           需要求的是每个页面的html的font-size
        1.需要安装rem to px插件
        2.文件--首选项--设置--在搜索栏搜索rem to px设置：Number of pixels per 1rem.100

        1rem=100
        选中要转换的值，按住 alt+z

    rem原理：
            rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小
            在布局过程中只要使用rem设置元素的尺寸，在改变rem的基准值html的字体大小的时候，页面上的元素将等比例缩放实现适配

    rem布局的实现：
            1.设置页面的viewport
            2.动态计算并设置不同尺寸html的font-size属性（rem.js)
            3.按照pc端布局方式正常布局，将px单位改为rem单位（较小的长度比如1px的边框就不需要转换为rem，直接设置px）

八、remjs解析

        function auto() {
      // 获取当前屏幕的宽度
      var deviceWidth = document.documentElement.clientWidth;

      // 打印当前屏幕的宽度
      console.log(deviceWidth);

      //psd设计稿的宽度 假如设计稿就是750px
      var desw = 375;
      //手机屏幕 大于 设置稿  ,就按1:1的大小去做 
      // 如果不加这行代码，页面会无限大
      if (deviceWidth > desw) {
        deviceWidth = desw;
      }

      // 获取当前屏幕宽度字体的基础值
      var currFontSize = (deviceWidth * 100) / desw

      // 打印当前屏幕宽度html的font-size
      console.log(currFontSize);

      // 赋值 （给html设置font-size的值）
      document.documentElement.style.fontSize = currFontSize + 'px';

      // 表示获取 html
      console.log(document.documentElement);
    }
    // 调用函数
    auto();

    //只要屏幕改变就调用auto函数 
    window.onresize = function () {
      auto();
    }