移动web : rem & less

层叠样式表广东分表
125 阅读4分钟

单位

  • 绝对单位

    • px

    • deg

    • s 、 ms ...

  • 相对单位

    • em: 参考当前容器的文字大小

    • rem: 参考根标签html标签的文字大小

    • % : 这个看情况

媒体查询

  • 查询不同的媒体设备进而应用不同的css样式

  • 语法

 @media  (width: 300px) {
          html {
                 font-size: 30px
          }
}

移动端的适配 :

rem适配

  • 媒体查询的适配

  • 利用媒体查询针对于各个屏幕尺寸去设置一个不同的根标签字体大小。由于我们开发者书写的是一个固定的rem值，根据rem是要乘以根标签字体大小去计算的原理，即可实现适配

    • 缺点，书写起来过于麻烦

  • 手机淘宝团队封装的flexible.js框架配合px to rem插件快速实现适配

    • flexible.js

      • 利用js的方式给每一个屏幕尺寸都设置了一个根标签的字体大小（当前屏幕宽度的尺寸 / 10）
      • 引入方式 利用<script src="flexible.js"></script>

    • 如何得到rem值？

      • ? rem * 37.5px = 你测量出的数值
      • ？rem = 测量出的数值 / 当前ui设计师给你的设计稿对应的根标签字体大小
      • 如果ui给你一张750的设计稿，2倍图，所以设计稿真实尺寸是 375 那么根标签字体大小应该是 37.5
      • 如果ui给你一640的设计稿，2倍图，所以设计稿真实尺寸是 320 那么根标签字体大小应该是 32

    • px to rem

      • alt + Z 可以快速将px->rem rem->px

        image.png

        image.png

        image.png

        image.png

vw适配

  • 之后有后续

less语法

css预处理语言

  • 由于浏览器不认识less文件，所以我们要对less文件做一个预处理操作，less编译成浏览器能够看懂的css文件。最后我们在html文件中引入的还是css文件

语法糖

  • 糖衣语法，便于开发者进行快速开发的语法规则。你按照语法糖去进行开发，可以让代码变得更加有逻辑，复用性更强，减少出错的概率

常见的css预处理语言

  • less

    • @import:""; 可以直接导入其他less
    • 类的嵌套关系
    • ...

  • sass、scss

    • 跟less差不样
    • 部分语法不一样

  • stylus

    • 没有符号

语法

  • 编译

    • easy less插件
    • 在保存时可以在同级目录自动生成一个同名的css文件

  • 注释

/* 
    css可以看到我
    css可以看到我
    css可以看到我
    css可以看到我
    css可以看到我
    css可以看到我
    css可以看到我
    css可以看到我
*/

// css看不到我
// css看不到我
// css看不到我
// css看不到我
// css看不到我
// css看不到我
// css看不到我
// css看不到我

- 单行注释

	- ctrl + /
	- 不会编译到css文件中

- 块注释、多行注释

	- shift + alt + A

  • 变量

    • @自定义的变量名: 值;

    • 例子

      @theme_color: #0a0;

    • 注意点

      • 变量结尾一定要有分号
      • 调用变量的时候也要带分号
      • 定义变量一般来说会写在整个文档的顶部

  • 导入

    • @import "你要引入的less文件路径";

    • 注意点

      • 1. 和变量语法极其类似，注意区分

      • 2. import 后面是空格 是空格 是空格 不是冒号 不是等号

      • 3. 导入的只能是less文件，如果路径有误，则无法编译

      • 4. 后缀名.less可省略

      • 5. 当A.less文件导入了B.less文件，在B.less文件修改了，需要在A.less中再次保存，才能编译到css文件中。

  • 嵌套

less文件:

.box {
     .son{
          width: 100px;
          &:hover {
                color: #00a; 
         }
     }
}

编译后到css文件后:

.box   .son {
       width: 100px;
}
.box   .son:hover{
      color: #00a;
}

- &可以去掉后代选择器的空格

- 多应用于伪类、伪元素选择器

  • less中的计算

       加   减   乘    除
   +    -    *    /

    • / <在less中比较特别>

      • 除法

      • /在css当中被视为分隔符

      • ./

        width: 100px ./ 10;

        width: 100./10px;

      • （）包裹除法的算式

        width: (100px / 10px);

    • 如果有多个单位的话，则取第一个单位为最终单位

  • 导出

    // out: ../css/ 导出到上一级的css文件夹, 若没有css文件夹则自动创建

    // out: false 禁止导出

    • 注意当前代码只能写在第一行，以单行注释的方式出现

  • css压缩

    • // compress: true
    • 把输出的css文件进行压缩（去掉多余的换行空格和分号）
    • 减少css文件的体积

  • sourceMap

    sourceMap: true

    • 希望浏览器提示出less的行号

    • 连写

      compress: true, out: ../css/ , sourceMap: true

  • 拓展

    • mixins混入
    • 看代码

  • css原生语法中的运算

    • calc(100px + 100px);

    • 语法较为严格

      • 加法和减法运算符前后必须加空格

      • 单位是参与运算的

        • calc(100px + 100px);

          • 正确

        • calc(100px + 100);

          • 不正确

        • calc(100px * 100px);

          • 不正确

        • calc(100px * 100);

          • 正确

    • ie9以下是不支持的

vscode配置

标签配对高亮

  • Highlight Matching Tag

image.png

  • 需要在设置文件中键入当前代码

    • "highlight-matching-tag.styles": { "opening": { "name": { "highlight": "#ff0" } } }

括号配对高亮

2021年12月vscode更新的功能 "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": true,

  • 个人学习内容总结
  • 忘记知识点的时候可以回来看看
  • 找找感觉
avatar
文章
阅读
粉丝