字体图标和媒体查询

一、字体图标——iconfont

1、笔记

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2、字体图标的优点

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有的浏览器，请放心使用

3、字体图标的使用

我们常用的是阿里巴巴的字体图标https://wwww.iconfont.cn>
字体图标的使用方式有三种
- unicode方式
- class方式
- symbol方式
我们常用的是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">&#xe612;</span>
    <!-- 方式二：class方式 -->
    <!-- 第一步：页面引入图标下面生成的iconfont.css文件，注意相对位置的问题 -->
    <!-- 第二步：页面中需要用到iconfont的地方，加个类名：iconfont+空格+字体图标的名字 -->
    <span class="iconfont icon-shezhi1"></span>
</body>
</html>

二、媒体查询

1、笔记

在不同的设备中，浏览器的窗口尺寸是不同的。如果只针对某种窗口尺寸来设计网页，其他设备加载页面时会产生很多问题
如果针对不同窗口尺寸制作不同的网页，那么工作量又是巨大的。
css3引入了media Queries媒体查询，主要用于制作响应式布局，在允许不改变内容的情况下，在样式中选择一种页面布局以精确的适应不同的设备。
媒体是什么呢？包括屏幕、手机、打印机、扫描仪、ipad等
布局前提：宽度受限高度无限
布局原则：根据媒体宽度width来进行查询从而确定元素的布局和渲染方式
默认：限定宽度，而高度可以随内容无限增长。
媒体查询的宽度顺序写法
- 移动端：从小往大写
- pc端：反过来，从大往小写

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>

2022.10.25第九课：字体图标与媒体查询的学习

字体图标和媒体查询

一、字体图标——iconfont

1、笔记

2、字体图标的优点

3、字体图标的使用

二、媒体查询

1、笔记

2、实例演示

相关文章