目录
5)新建index.less文件,并把common.less引入到index.less中
一、 rem单位
em是相对于父元素的字体大小来说的。如 其父元素的字体大小为12px,子元素的宽度为10em,那么子元素的宽度就是12*10 px;
但rem是相对于html元素的字体大小来说的,算法与em同理。
rem单位的优势:
整个页面只有一个html,通过设置调整html里面的文字大小,就可以修改页面所有盒子(元素)的宽度和高度(盒子用rem单位)。
当html里的文字大小变化时,页面所有的元素都会跟着变化,并且是等比例变化的 ,从而达到了整体的控制。
rem和em的应用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
html {
font-size: 14px;
}
div {
font-size: 12px;
width: 10rem;
height: 10rem;
background-color: pink;
/* 呈现出来的盒子大小为:14*10=140px宽,14*10=140px高 */
}
p {
width: 10em;
height: 10em;
background-color: purple;
/* 呈现出来的盒子大小为:12*10=120px宽,12*10=120px高 */
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
效果:
二、媒体查询
Media Query 是CSS3的新语法。
2.1 价值:
可以针对不同的屏幕尺寸设置不同的样式。
2.2 语法规范:
@media 媒体类型 关键字 (媒体特性) { 样式; }
代码:
<style>
/* 这句话的意思就是: 在我们屏幕上 并且 最大的宽度是 800像素 然后设置我们想要的样式 */
/* max-width: 800px, 意思是小于等于800px */
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
</style>
2.3 案例1——根据页面宽度改变背景色
媒体查询一般按照 从小到大 or 从大到小的顺序来。
注意:媒体特性里的单位不可以省略,数值是包含了=的。
代码:
<style>
/* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
/* 2. screen 还有 and 必须带上 不能省略 */
/* 3. 我们的数字后面必须跟单位 970px 这个 px 不能省略 */
/* 第一档:小于540px 页面背景颜色变为 浅蓝色 */
@media screen and (max-width: 539px) {
body {
background-color: lightblue;
}
}
/* 第二档:540 ~ 970 页面背景颜色变为 浅绿色 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
body {
background-color: green;
}
} */
/* 第二档的简易写法:(代码的层叠性) */
@media screen and (min-width: 540px) {
body {
background-color: lightgreen;
}
}
/*第三档:大于等于970 页面背景颜色变为 粉红色色 */
@media screen and (min-width: 970px) {
body {
background-color: pink;
}
}
</style>
效果:
代码的层叠性:
2.4 案例2——媒体查询+rem实现元素动态大小变化
代码:
背景颜色和文字大小 随着屏幕宽度的变化而变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>媒体查询 + rem : 实现元素动态变化</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 从小到大的顺序 */
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
.top {
/* 实现高度和字体大小 随着屏幕的宽度改变而改变 */
height: 1rem;
font-size: .5rem;
background-color: lightgreen;
color: #fff;
/* 垂直水平居中 */
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
</html>
效果:
2.5 引入资源(理解)
当样式比较繁多时,可以针对不同的媒体使用不同的同 stylesheets(样式表)。
原理:直接在link中判断设备的尺寸,然后引入不同的css文件。
语法规范:
案例:
当我们屏幕宽度>=640px时,让div一行显示2个
当我们屏幕宽度<640px时,让div一行显示1个
效果:
三、Less基础
3.1 维护css的弊端
3.2 Less介绍
3.3 Less使用
1)Less变量
变量命名规范:
- 必须有@为前缀;
- 不能包含特殊字符,如@~#;
- 不能以数字开头;
- 大小写敏感,区分大小写
变量的使用: