媒体查询
- 媒体查询能使页面在不同的终端设备下达到不同的效果，会根据设备的大小自动识别加载不同的样式
- 设置meta标签
- 使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签
- 按照原比例缩小放大
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0，user-scalable=no">
参数解释： width=device-width：宽度等于当前设备的宽度 initial-scale:初始的缩放比例（默认设置为1.0） maximum-scale:允许用户缩放到的最大比例（默认设置为1.0） user-scalable:用户是否可以手动缩放（默认设置为no） - 使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签
- 媒体查询语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
}
@media screen and (max-width:768px) {
.box{
background-color: aqua;
}
}
@media screen and (min-width:768px) and (max-width:996px){
.box{
background-color: green;
}
}
@media screen and (min-width:996px){
.box{
background-color: red;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
以上屏幕适应度从上到下分别为手机，平板，电脑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
}
@media screen and (max-width:768px) {
.box{
background-color: aqua;
}
.p1{
display: none;
}
.p2{
display: none;
}
}
@media screen and (min-width:768px) and (max-width:996px){
.box{
background-color: green;
}
.p1{
display: none;
}
.p2{
display: block;
}
}
@media screen and (min-width:996px){
.box{
background-color: red;
}
.p1{
display: block;
}
.p2{
display: block;
}
}
</style>
</head>
<body>
<div class="box"></div>
<p class="p1">哈哈</p>
<p class="p2">呵呵</p>
</body>
</html>
"以上意思是写完代码后,运行然后点击’检查’选项，将’检查’边框左右拖动，可以看到有手机，平板，电脑显示出不一样的界面，display: none;表示不显示；display: block;表示显示。
雪碧图
- CSS Sprite也叫作CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去
- 优点
- 减少图片的字节
- 减少网页的http请求，从而大大的提高页面的性能
- 原理
- 通过background-image引入背景图片
- 通过background-position把背景图片移动到自己需要的位置
- 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.icon1{
display: block;
width: 40px;
height: 40px;
background-image: url(1.webp);
border: 1px solid red;
background-position: -10px 0;
}
.icon2{
display: block;
width: 40px;
height: 40px;
background-image: url(1.webp);
border: 1px solid red;
background-position: -40px -40px;
}
</style>
</head>
<body>
<span class="icon1"></span>
<span class="icon2"></span>
</body>
</html>
其中<span></span>是内联元素，不能设置宽和高，所以在开头加上display: block;将其变成块级元素，在这不直接使用块级元素是因为使用<span>＋display:block更中性、灵活。
background-position: -40px -40px;第一个表示左右移动，负数代表向右移动，正数代表向左移动；第二个表示上下移动，负数代表向上移动，正数代表向下移动。
字体图标
- 我们使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题
- 常用字体图标库：阿里字体图标库（网址：https://iconfont.cn/）
- 优点
- 轻量性
- 加载速度快，减少http请求
- 灵活性
- 可以利用CSS设置大小颜色等
- 兼容性
- 网页字体支持所有现代浏览器，包括IE低版本
- 轻量性
- 使用字体图标步骤
- 注册账号并登录
- 选取图标或搜索图标
- 添加购物车
- 下载代码
- 选择font-class引用(在demo_index.html这一栏里可以点击进入浏览器有使用步骤)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./font/iconfont.css">
<style>
.shouye{
font-size: 40px;
color: aqua;
}
</style>
</head>
<body>
<span class="iconfont icon-shouye shouye"></span>
</body>
</html>
在<style></style>里的.shouye是命名的，也可以是.iconfont方便设置大小和颜色。
