移动适配

移动适配网页元素的宽高都要随着设备宽高等比例缩放 rem 目前多数企业在用的解决方案

rem相对单位 1rem=1html标签字号大小

目前rem布局方案中，将网页分成10份，HTML标签的字号为视口宽度的1/10

媒体查询书写方式

语法： @media （媒体特性）｛

选择器｛

css属性

｝

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

      /* 2.适配414宽度 的手机 */
      @media (width: 414.4px) {
        html {
          font-size: 41.4px;
        }
      }

pc端媒体查询

/* 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;
    }
  }

  @media (min-width: 1580px) {
    .box {
      width: 600px;
      height: 400px;
      background-color: purple;
    }
  }

在body中添加手淘js文件自适应兼容所有移动端屏幕

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

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

less的使用

在vs中拓展下载插件easyless

1.单行与多行注释：

// 单行注释 ctrl+/ 单行注释不会编译在css文件中

/* shift+alt+a 多行注释 */

2.less计算

/* less计算：

- - 除法./或者()

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

2.写法规范：运算符前后要么都用空格隔开，要么前后都不要空格 */

  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;
}

3.less的嵌套

.box {
  background-color: red;

  .title {
    width: 200px;
  }

  .footer {
    height: 200px;
  }
}

// 2.生成子代选择器 >
.father {
  > .son {
    color: #333;

    > .sun {
      font-size: 20px;
    }
  }
}

// 3.交集选择器 &符号指代的是直接上级
p.red {
  background-color: red;
}

p {
  &.red {
    background-color: skyblue;
  }
}

// 4.并集选择器
.box1,
.box2 {
  color: #333;
}

.box {
  .son1,
  .son2 {
    color: #000;
  }
}

// 5.伪类选择器  :hover
.box li:hover a {
  color: #666;
}
.box {
  li:hover {
    a {
      color: #333;
    }
  }
}

// &符号不生成后代选择器，表示直接上级
.box {
  li {
    span {
      &:hover {
        a {
          color: #999;
        }
      }
    }
  }
}

// 6.添加伪元素
.box {
  a::before {
    content: '';
  }

  a {
    &::after {
      content: '';
    }
  }
}

// 7.结构伪类选择器 直接写在选择器的后面是没有提示的
.header {
  li:last-child {
    margin-right: 0;
  }

  li {
    &:first-child {
      margin-left: 0;
    }
  }
}

4.less变量

// 变量 @变量名: 值; /* 大大节约维护代码成本 */

@themeColor: gold;
@fontSize: 18px;
body {
  background-color: @themeColor;
}
.box1 {
  background-color: @themeColor;
  font-size: @fontSize;

5.less导出

//out：位置 1.css到处路径，后面一定要写/ 如果不写只是普通的文件名 2.less配置信息，一般要写在第一行

在设置搜索less设置成自动生成css文件夹 "less.compile": {

"out": "../css/"

禁止导出less

//out：false

压缩导出css

//compress:true

移动web-rem、less语法基础

移动适配

在body中添加手淘js文件自适应兼容所有移动端屏幕

less的使用