字体图标和媒体查询
一、字体图标——iconfont
1、笔记
- 字体图标使用场景: 主要用于显示网页中通用、常用的一些小图标。
- 字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
2、字体图标的优点
- 轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求
- 灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性:几乎支持所有的浏览器,请放心使用
3、字体图标的使用
- 我们常用的是阿里巴巴的字体图标https://wwww.iconfont.cn>
- 字体图标的使用方式有三种
- 我们常用的是
unicode
和Font class
方式。 - 在使用之前我们需要在阿里图标,素材库找到想要用的图标,添加至项目中,并下载下来到一个文件夹中。阿里图标库下载后的文件如下:
unicode
方式
- 第一步:页面引入图标下面生成的iconfont.css文件,注意相对位置的问题
第二步:页面中需要用到iconfont的地方,加个类名iconfont,同时把该字体图标的实体字符写到文本中
font class
方式
- 第一步:页面引入图标下面生成的iconfont.css文件,注意相对位置的问题 —>
第二步:页面中需要用到iconfont的地方,加个类名:iconfont+空格+字体图标的名字
- 实例代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iconfont的使用</title>
<link rel="stylesheet" href="../iconfont/iconfont.css">
<link rel="stylesheet" href="../iconfont/iconfont.css">
</head>
<body>
<!-- 方式一:unicode方式 -->
<!-- 第一步:页面引入图标下面生成的iconfont.css文件,注意相对位置的问题 -->
<!-- 第二步:页面中需要用到iconfont的地方,加个类名iconfont,同时把该字体图标的实体字符写到文本中 -->
<span class="iconfont"></span>
<!-- 方式二:class方式 -->
<!-- 第一步:页面引入图标下面生成的iconfont.css文件,注意相对位置的问题 -->
<!-- 第二步:页面中需要用到iconfont的地方,加个类名:iconfont+空格+字体图标的名字 -->
<span class="iconfont icon-shezhi1"></span>
</body>
</html>
二、媒体查询
1、笔记
- 在不同的设备中,浏览器的窗口尺寸是不同的。如果只针对某种窗口尺寸来设计网页,其他设备加载页面时会产生很多问题
- 如果针对不同窗口尺寸制作不同的网页,那么工作量又是巨大的。
- css3引入了
media Queries
媒体查询,主要用于制作响应式布局,在允许不改变内容的情况下,在样式中选择一种页面布局以精确的适应不同的设备。 - 媒体是什么呢?包括屏幕、手机、打印机、扫描仪、ipad等
- 布局前提:
宽度受限 高度无限
- 布局原则:根据媒体宽度
width
来进行查询从而确定元素的布局和渲染方式 - 默认:限定宽度,而高度可以随内容无限增长。
- 媒体查询的宽度顺序写法
2、实例演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局(media queries)模块</title>
<style>
/* 1.没有媒体查询之前,页面的样式设置 */
/* 使用float布局 */
body,h2 {
margin:0;
padding:0;
color:white;
}
#main,header,aside,footer {
background-color: rgb(100, 100, 100);
margin:5px 0;
}
h2 {
text-align:center;
font-size:3em;
}
#container {
width:960px;
margin:0 auto;
}
header {
float:left;
width:100%;
line-height:100px;
}
#left {
float:left;
width:200px;
line-height:400px;
}
#main {
float:left;
width:540px;
line-height:400px;
margin-left:10px;
}
#right {
float:right;
width:200px;
line-height:400px;
}
footer {
float:left;
width:100%;
line-height:80px;
}
/* 以下应用媒体查询,进行响应式布局, */
/* 1.屏幕宽度在1024px以上使用的样式,类似于电脑*/
@media (min-width:1024px){
h2 {
text-align:center;
font-size:3.5rem;
color:yellow;
}
#container {
width:960px;
margin:0 auto;
}
header {
float:left;
width:100%;
}
#left {
float:left;
width:200px;
}
#main {
float:left;
width:540px;
margin-left:10px;
}
#right {
float:right;
width:200px;
}
footer{
float:left;
width:100%;
}
}
/* 2.屏幕宽度在640px以上,1024px以下使用的样式,类似平板电脑 */
@media screen and (min-width:640px) and (max-width:1023px) {
h2{
text-align:center;
font-size:2.5rem;
color:#f0f;
}
#container {
width:600px;
margin:0 auto;
}
#left {
float:left;
width:160px;
}
#main {
float:left;
margin-left:10px;
width:430px;
}
/* 次要区块可以不在屏幕显示 */
#right {
display:none;
}
}
/* 3.屏幕宽度在640px以下使用的样式,从上到下排列5行显示 */
@media screen and(max-width:639px) {
h2 {
text-align:center;
font-size:3.5rem;
color:#0f0;
}
#container {
width:400px;
margin:0 auto;
}
#left {
float:left;
width:100%;
line-height:100px;
}
#main {
float:left;
margin-left:0;
width:100%;
line-height:200px;
}
#right{
width:100%;
float:left;
line-height:100px;
}
}
</style>
</head>
<body>
<section id="container">
<header>
<h2>header</h2>
</header>
<aside id="left">
<h2>left</h2>
</aside>
<section id="main">
<h2>main</h2>
</section>
<aside id="right">
<h2>right</h2>
</aside>
<footer>
<h2>footer</h2>
</footer>
</section>
</body>
</html>