移动端的适配/less语法

皮zai
198 阅读4分钟

移动适配

单位

绝对单位

  • 设置多少就是多少，不会随着某个值的改变而改变

相对单位

  • 会参考着某个值的变换而变化

    • em

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

    • rem

      • 参考跟标签html标签的文字大小

媒体查询

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

语法

  • /* 当手机屏幕宽度达到300px时，字体大小变更成30px */
@media  (width:300px)  {
     html {
            font-size:30px；
     }
}

移动端的适配

rem适配

  • 媒体查询的适配

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

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

    • flexible.js

      • 利用js的方式给每一个屏幕尺寸都设置了一个根标签的字体大小（当前屏幕宽度的尺寸 1 / 10）

      • 引入方式 利用

        • 将其写在body标签里的底部

    • 如何得到rem值

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

    • 相关visual studio code插件

      • alt + Z 可以快速将 px -> rem rem ->px 完成属性转换

image.png

image.png

image.png - “px-to-rem.px-per-rem”:37.5

		- 根据设计稿不同更改不同的数值

less语法

css预处理语言

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

语法糖

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

常见的css预处理语言

  • less

    • @

  • sass与scss

  • stylus

    • 在生成css文件时，没有符号

语法

  • 编译

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

  • 注释

    • 单行注释

      • 快捷键：ctrl + /
      • 不会编译到css文件中

    • 块注释、多行注释

      • 快捷键：shift + alt + A

  • 变量

    • @自定义的变量名： 值；

    • 例子

      • @theme_color：#0a0;

    • 注意点

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

  • 导入

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

    • 注意点

        1. 和变量语法极其类似，注意区分
        1. import 后面是空格 空格！不是冒号 不是等号
        1. 导入的只能是less文件，如果路径有误，则无法编译
        1. 后缀名.less可省略
        1. 当 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中的计算

        • 加法

      • 减法

      • 乘法

    • /

      • 除法

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

      • . /

        • 100px . / 10
        • 100 . / 10px

      • ( )包裹除法的算式

        • （100px / 10px）

  • 导出

    • // out: . . / css /

    • // out: false

      • 禁止导出

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

  • css压缩

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

  • sourceMap

    • compress:true

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

    • 连写

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

  • css原生语法中的运算

    • calc(100px +100px)；

    • 语法较为严格

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

      • 单位是参与运算的

        • calc(100px +100px)；

          • 正确

        • calc(100px +100)；

          • 不正确

        • calc(100px *100px)；

          • 正确

        • calc(100px * 100)；

          • 不正确

    • ie 9 以下是不支持的

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
文章
阅读
粉丝