响应式布局

☞核心知识点

• less
• 媒体查询

学习目标

• 掌握less基本语法
• 能够使用less编写css代码
• 能够掌握媒体查询
• 能够使用媒体查询实现响应式布局

Less介绍

维护CSS的弊端

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

LESS介绍

☞LESS预处理器: 依然使用CSS语法，引入了变量，混合，运算, 嵌套等功能，大大简化了 CSS 的编写，并且			  降低了 CSS 的维护成本☞常见的CSS预处理器:  Less  | SASS  | Stylus[staɪləs] 等https://less.bootcss.com/
https://www.sass.hk/install/
https://www.zhangxinxu.com/jq/stylus/

开发工具配置

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();}

嵌套

例如:
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自带一个服务器环境

媒体查询

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)

@media only screen and (min-width: 320px) and (max-width: 767px) {}

小屏幕 平板 (≥768px)

@media only screen and (min-width: 768px) and (max-width: 991px) {}

中等屏幕 桌面显示器 (≥992px)

@media only screen and (min-width: 992px) and (max-width: 1199px) {}

大屏幕 大桌面显示器 (≥1200px)

@media only screen and (min-width: 1200px) {}