前端与移动开发----移动web开发----LESS介绍+媒体查询（内附综合案例----小兔鲜）

LESS介绍+媒体查询

核心知识点

1. less

2. 媒体查询

Less介绍

维护CSS的弊端

CSS本质上不是一门语言,是一个简单的样式表.代码维护相对老套,不够灵活.

LESS介绍

☞LESS预处理器: 依然使用CSS语法，引入了变量，混合，运算, 嵌套等功能，大大简化了 CSS 的编写，并且			  降低了 CSS 的维护成本


☞常见的CSS预处理器:  Less  | SASS   等

https://less.bootcss.com/
https://www.sass.hk/install/

安装及使用

1. 开发工具配置

   VSCode需要安装插件:  Easy Less  安装成功后  Ctrl+s保存即可
   

   

Less语法

• 变量

  ☞@自定义变量名: 值;
      例如:
      @nav_bgcolor: red;
      nav {
          color: @nav_bgcolor;
      }
  
  ☞变量的运算:
  	@width: 10;
      nav {
  		width: @width * 3px;
      }
      
      进行数学计算: (+ - * /)
      注意: 如果在进行数学计算的时候,可以带有单位,但是一般推荐写到运算符的前面  
  

• 混合

  ☞ 定义一个公共的样式(可以式类选择的语法,可以是ID选择器的语法)
  例如:
  	.test() {
          width: 50px;
          height: 50px;
      }
  
      nav {
          .test();
      }
  
      header {
          .test();
      }
  
  
  ☞ 可以设置参数
  例如:
  .test(@width) {
      width: @width;
  }
  
  nav {
      .test(100px);
  }
  
  
  ☞ 可以为参数设置默认值
  例如:
  .test(@width: 100px) {
      width: @width;
  }
  nav {
      .test();
  }
  header {
      .test(50px);
  }
  

• 嵌套

  例如:
  nav {
      ul {
          li {
               
          }
      }
  }
  

在浏览器中预览LESS文件(了解)

1. HTML页面直接沟通link标签引用 less文件
 <link rel="stylesheet/less" type="text/css" href="less文件.less">

2. HTML页面中引用用来解析less文件的一个js文件
 <script type="text/javascript" src="less.js"></script>

备注:
1. 以上执行过程需要在服务器环境下进行
2. webstorm开发工具下,可以执行运行,因为webstorm自带一个服务器环境

渐变

• 线性渐变

  • 组成

    • 开始颜色和结束颜色
    • 渐变方向
    • 渐变范围 【百分比表示】

  • 语法

    background-image: linear-gradient();
    

  • 总结

    1。 如果在线性渐变中，没有设置 background-size，那么百分比是相对整个父元素的宽度
    2。 如果设置了background-size，那么百分比是相对设置的background-size的值；
    

• 径向渐变

  • 组成

    • 开始颜色和结束颜色
    • 渐变范围【通过径向渐变半径】
    • 渐变圆心位置

  • 语法

    background-image: radial-gradient();
    

  • 总结

    1. 确定圆心位置可以通过具体的方位名称  at + top | right  | left | bottom|....
    2. 通过具体值确定圆心位置： 100px  at  50px   200px;
    3. 如果只设置一个半径值，那么代表水平半径和垂直半径一样【正圆】
    4. 如果设置两个值，第一个值代表水平半径，第二值代表垂直半径， 两个值中间使用空格隔开。例如：
    100px  50px at center,
    

• 拓展

  • 文字渐变效果

    background-image: linear-gradient(
         to right,
         red,
         blue
    );
    -webkit-background-clip: text;
    color: transparent;
    

  • 立体文字效果(补充)

    font-size: 100px;
    color: yellow;
    text-shadow:0px 0px 0  #001, 1px -1px 0 #002, 2px -2px 0 #003, 3px -3px 0 #004,
    4px -4px 0 #005,5px -5px 0 #006,6px -6px 0 #007,7px -7px 0 #008,8px -8px 0 #009,
    9px -9px 0 #010;
    

媒体查询

1. 概念

   媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
   

2. 组成

   • 媒体类型
     • all (所有的设备)
     • print (打印设备)
     • screen(电脑屏幕,平板电脑),智能手机
   • 媒体特性
     • width
     • height
     • max-width / max-height
     • min-width / min-width
     • orientation: portrait (竖屏模式肖像) | landscape (横屏模式全景)
   • 语法关键字
     • and 可以将多个媒体特性链接到一块,相当于且
     • only 指定某个特定的媒体类型, 可以省略

3. 语法

   @media only screen and (width: 320px) {
        css代码
   }
   

4. 设备划分

   • 超小屏幕 手机 (<768px)
   • 小屏幕 平板 (≥768px)
   • 中等屏幕 桌面显示器 (≥992px)
   • 大屏幕 大桌面显示器 (≥1200px)

综合案例截图：

猛击下载less+媒体查询综合案例–小兔鲜

如有不足，请多指教，
未完待续，持续更新！
大家一起进步！