今天继续CSS3的学习 以下是学习内容
媒体查询
在head中加入
<meta name=”vieport” cotent=”width=device-width,initial-scale=1,maximum-scale=1, user-scalabke=no”>
width=device-width 宽度相当于当前设备的宽度
initial-scale 初始的缩放比例（默认为1.0）
maximum-scale 允许用户缩放到的最大比例（默认为1.0）
user-scalabke 用户是否可以手动缩放（默认为no）
媒体查询的语法：
head中加入
@media screen and(max-width: 768px) //手机
{
.box
{
background-color: aqua;
}
}
@media screen and(min-width: 768px)and(max-width:996px) //平板
{
.box
{
background-color: chartreuse;
}
}
@media screen and(min-width: 996px) //电脑
{
.box
{
background-color: red;
}
}
雪碧图
可以减少图片的字节
减少网页的http请求，提高页面性能
body中
head中
.span1
{
display: block; //行内元素变为块级元素
width: 45px;
height: 70px;
background-image: url(图片链接）；
background-position: -20px;
}
.span2
{
display: block; //行内元素变为块级元素
width: 45px;
height: 70px;
background-image: url(图片链接）；
background-position: -300px -85px;
}
字体图标
加载速度快 减少http请求
可以利用CSS设置颜色大小
网页字体支持所有现代浏览器 包括IE低版本
使用字体图标
注册账号并登录
选取图标或搜索图标
添加购物车
下载代码
选择font-class引用
第一步 <link rel”stylesheet” href=”./iconfont.css”
第二步 body中加入<span class=”iconfont 图标名字 home”>
head中加入
.home
{
font-size: 40px;
}
调整图标大小也可加入颜色
明天将开始JavaScript的学习
