响应式布局
☞核心知识点
- 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) {}
