web移动适配方法

媒体查询

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

应用语法

• @media (width: 375px) { html { font-size: 50px; } }

移动端的适配

rem适配

• 媒体查询的适配

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

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

vm适配

less语法

css预处理语言的一种

语法

• 编译

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

• 注释

  • 单行注释

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

  • 多行注释

    • shift + alt + A

• 变量

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

  • 注意点

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

• 导入

  • @import “引入的css文件路径”；

  • 注意点

    • 1. 和变量语法极其类似，注意区分 2. import 后面是空格 是空格 是空格 不是冒号 不是等号

3. 导入的只能是less文件，如果路径有误，则无法编译
4. 后缀名.less可省略
5. 当A.less文件导入了B.less文件，在B.less文件修改了，需要在A.less中再次保存，才能编译到css文件中

• 导出

  • // out：./css/

  • // out：false

    • 禁止导出

  • 注意点

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

• 嵌套

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

    • 多用于伪类，伪元素选择器

• css压缩

  • // compress：true
  • 意义：减少css文件的体积

• sourceMap

  • // sourceMap：true
  • 作用：希望浏览器提示出less的行号

• css原生语法中的运算

  • calc（100px + 100px）;