day04

移动端适配：

rem 相对单位 1rem = 1HTML标签字号

媒体查询以视口宽度为375px为例我们使用媒体查询

  @media (width: 375.2px) {
    /* 设置html标签的字体大小 */
    html {
      font-size: 37.5px;
    }
  }

1.插入js文件标签 script 已经根据不同的视口宽度设置了不同的html根字号的大小

<script src="./js/flexible.js"></script>

pc端的媒体一般条件为范围

max-width 规定最大宽度

min-width 规定最小宽度

  @media (max-width: 1366px) {
    .box {
      width: 400px;
      height: 400px;
      background-color: skyblue;
    }
  }

  @media (min-width: 1366px) and (max-width: 1580px) {
    .box {
      width: 500px;
      height: 300px;
      background-color: orange;
    }
  }

less： CSS预处理器，让CSS具备逻辑和计算能力

浏览器和网页不识别less，目前需要将less文件导出CSS文件，HTML引入CSS文件

less计算：

（ + - * /）或者()

注意点： 1.单位在表达式之中不分顺序，表达式中如果有多个单位以第一个单位为准；

2.写法规范：运算符前后要么都用空格隔开，要么前后都不要空格列如以下

    .box {
     width: 100 + 200px;
     height: 500px - 300;
     font-size: 10 * 10px;
     // line-height: 200px ./ 10;
     width: (500 / 100px);
     height: 300px + 200deg + 10rem;

     line-height: 100px+10px;

      width: 200 +10px;
       }

变量 @变量名: 值;

     /* 大大节约维护代码成本 */
     @themeColor: gold;
     @fontSize: 18px;

less的导入和导出

@import "你要导入的文件路径";

    @import url(./03-计算.less);
    @import './04-嵌套.less';

导出

    // out: ../css/
   /*
   注意点：
   1.css导出路径，后面一定要写/，如果不写只是普通的文件名，不要分号结尾；
   2.less配置信息，一般要写在第一行
  */

禁止导出

 //out: false

压缩导出

 // compress:true,out:./

前端web知识总结day04