rem
1)什么是rem
- rem 是相对于根元素(html)的相对长度单位,常用于响应式布局
2)不使用rem会有什么问题
- 页面中的文字不能随着屏幕的变换而变化
- 百分比布局和flex布局主要针对宽度布局,高度却被忽略
3)为什么使用rem
- 让页面中的文字和元素的宽高随屏幕变化而变化
4)设置viewport
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
媒体查询@media
1)什么是媒体查询
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color 等
使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果
2)为什么使用媒体查询
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的
在使用rem做单位元素时,元素尺寸回根据根元素(html)的font-size值变化而变化
屏幕变大时,则根元素的font-size值变大,相应的元素也会变大
屏幕变小时,则根元素的font-size值变小,相应的元素也会变小
3)viewport设置
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-
width=device-width:宽度等于当前设备的宽度
-
initial-scale=1:初始的缩放比例(默认为1)
扫描二维码关注公众号,回复: 12649290 查看本文章 -
maximum-scale=1:允许用户缩放到得最大比例(默认为1)
-
user-scalable=no:用户不能手动缩放
4)如何使用
@media screen and (max-width:720px) and (min-width:320px){
body{
background-color:#000;
}
@media screen and (max-width:320px){
body{
background-color:#eee;
}
}
5)媒体查询的类型
媒体类型(Media types)描述设备的一般类别。除非使用 not 或 only 逻辑操作符,媒体类型是可选的,并且会(隐式地)应用 all 类型
-
all
适用于所有设备 -
print
适用于在打印预览模式下在屏幕上查看的分页材料和文档。 (有关特定于这些格式的格式问题的信息,请参阅分页媒体) -
screen
主要用于屏幕 -
speech
主要用于语音合成器 -
braille
盲文触摸装置
-
embossed
分页盲文打印机
-
handheld
小屏幕和流量有限的手持设备
-
projection
投影,给投影机使用
-
tty
固定间距字符网格
-
tv
智能电视设备
6)媒体查询关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
- and:可以将多个媒体特性连接到一起,相当于“且”的意思
- not:排除某个媒体类型,相当于“非”的意思,可以省略
- only:指定某个特定的媒体类型,可以省略
- ,(逗号:英文状态下的):表示或者的意思
7)媒体查询特性(每条媒体特性表达式都必须用括号()括起来)
- any-hover 是否有任何可用的输入机制允许用户(将鼠标等)悬停在元素上
- any-pointer 可用的输入机制中是否有任何指针设备,如果有,它的精度如何
- aspect-ratio 视窗(viewport)的宽高比
- color 输出设备每个像素的比特值,常见的有 8、16、32 位。如果设备不支持输出彩色,则该值为 0
- color-gamut 用户代理和输出设备大致程度上支持的色域
- color-index 输出设备的颜色查询表(color lookup table)中的条目数量,如果设备不使用颜色查询表,则该值为 0
- display-mode 应用程序的显示模式,如web app的manifest中的display 成员所指定
- forced-colors 检测是user agent否限制调色板
- grid 输出设备使用网格屏幕还是点阵屏幕?
- height 视窗(viewport)的高度
- hover 主要输入模式是否允许用户在元素上悬停
- inverted-colors user agent或者底层操作系统是否反转了颜色
- light-level 环境光亮度
- monochrome 输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕,则该值为 0
- orientation 视窗(viewport)的旋转方向
- overflow-block 输出设备如何处理沿块轴溢出视窗(viewport)的内容
- overflow-inline 沿内联轴溢出视窗(viewport)的内容是否可以滚动
- pointer 主要输入机制是一个指针设备吗?如果是,它的精度如何
- prefers-color-scheme 探测用户倾向于选择亮色还是暗色的配色方案
- prefers-contrast 探测用户是否有向系统要求提高或降低相近颜色之间的对比度
- prefers-reduced-motion 用户是否希望页面上出现更少的动态效果
- prefers-reduced-transparency 用户是否倾向于选择更低的透明度
- resolution 输出设备的像素密度(分辨率)
- scan 输出设备的扫描过程(适用于电视等)
- scripting 探测脚本(例如 JavaScript)是否可用
- update 输出设备更新内容的渲染结果的频率
- width 视口(viewport)的宽度,包括纵向滚动条的宽度
- width
- min-width定义视口(viewport)的最小宽度
- max-width定义视口(viewport)的最大宽度
less
特点:
写样式更简单:**嵌套**
使用方便:**变量、运算、函数**
1)css 存在的问题
CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念
CSS 需要书写大量看似没有逻辑的代码,CSS 冗余度是比较高的
不方便维护及扩展,不利于复用
CSS 没有很好的计算能力
非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代
码项目
2)less介绍
Less 介绍----Less是一门 CSS 预处理语言,它扩展了CSS的动态特性
Less(LeanerStyle Sheets 的缩写)是一门 CSS扩展语言,也成为CSS预处理器
做为 CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语
言的特性
它在CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编
写,并且降低了 CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情
Less中文网:http://lesscss.cn/
3)less编写和编译
先创建 .less 文件,然后将其编译成最终使用的css文件,因为 html 文件只能引入 css 文件
每次更新less文件后,需要重新编译成css文件(vscode中的插件 easy less会自动编译)
编写:
@bgcolor:#000;
body {
background-color: @bgcolor;
}
.box {
width: 100px;
height: 100px;
background-color: @bgcolor;
}
@size:16px;
body {
font-size: @size;
}
.box {
width: 200px;
height: 200px;
font-size: @size;
}
编译:
安装 vs code 插件 easy less
在 .less 文件中保存代码,就会自动生成同名的 css 文件
在 html 文件中引入 css 文件即可
4)语法
变量:
@color:#adf;
@height:100px;
//1. 变量声明
header{
background-color:@color;
height:@height;
}
- 变量名称要求: 字母、数字、下划线、中横线
- 首字母可以为数字,可以为纯数字
- 区分大小写
- 变量值随意
运算:
header{
height:100px+200px;
}
section{
height:100px*2%; // 200px;
// 如果都有单位,则使用第一个作为单位
width:900/33px; //27.2727px;
// 如果只有一个有单位,则使用该单位
}
嵌套:
less 支持嵌套书写形式
(1)普通嵌套
#app{
#header{
// 子孙元素
.logo{
}
// 子元素
>.search{
}
// 后边紧挨着的元素
+ div{
}
&:hover{
}
&::before{
}
}
}
(2)媒体查询
.left{
height:500px;
background-color:#adb;
// >=1200
@media screen and(min-width:1200px) {
background:#6e4848;
}
// >=1200,<=900
@media screen and(max-width:1200px) and (min-width:900px){
background:#baa;
}
//<900
@media screen and (max-width:900px){
background:#abd;
}
}
(3)变量作用域
变量只能在当前代码段和下层代码段使用