前端基础+范建荣+20230427

一、学习内容

• 媒体查询
  
  • 什么是媒体查询
    
    • 媒体查询是可以帮助我们查询不同的屏幕宽度来进行相应的设置
      
    • 使用@media 查询，可以针对不同的媒体类型来定义不同的样式
      
    • 当我们重置浏览器的时候，页面会根据媒体查询来重新渲染页面
      
    • 目前我们主要的媒体查询是针对移动端的：比如手机、平板等等。
      
  • 媒体查询的语法规范
    
    • 用@media 开头
      
    • mediatype 媒体类型
      
      • all 用于所有设备
        
      • print 用于打印设备和打印预览
        
      • screen 用于电脑屏幕、平板、手机等等（主要使用这个类型）
        
    • 关键字 and not only
      
      • and 可以将多个媒体特性连接起来，相当于且的意思
        
      • not 排除某个媒体类型，相当于非的意思，可以省略
        
      • only 指定某个特定的媒体类型 可以省略
        
    • media feature 媒体特性，必须放在小括号中
      
      • width 定义输出设备中页面可见区域的宽度
        
      • min-width 定义输出设备中页面最小可见区域
        
      • max-width 定义输出设备中页面最大可见区域
        
    • @media mediatype and|not|only （media feature） { CSS的样式代码}
      
    • 例
      
  Less基础

• Less中的变量使用
  
  • 变量是指没有固定的值，并且可以改变里面装的值。简单理解就是一个装具体值的一个盒子
    
  • @变量名: 值；
    
  • 注意点：
    
    • 必须要以 @ 开头
      
    • 不能包含特殊字符
      
    • 不能以数字开头
      
    • 大小写敏感（@Color 和@color 是两个变量）
      
• Less的编译
  
  • 下载编译插件 easy less
    
  • 创建less文件
    
  • 书写代码后保存会自动生成css文件
    
  • 例
    

二、遇到的问题
三、是否解决