search

博客列表 >2022.10.25第九课：字体图标与媒体查询的学习

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

启动未来
启动未来原创
2022年10月30日 19:52:32527浏览

字体图标和媒体查询

一、字体图标——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+空格+字体图标的名字
  • 实例代码如下：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>iconfont的使用</title>
  8.     <link rel="stylesheet" href="../iconfont/iconfont.css">
  9.     <link rel="stylesheet" href="../iconfont/iconfont.css">
  10. </head>
  11. <body>
  12.     <!-- 方式一：unicode方式 -->
  13.     <!-- 第一步：页面引入图标下面生成的iconfont.css文件，注意相对位置的问题 -->
  14.     <!-- 第二步：页面中需要用到iconfont的地方，加个类名iconfont，同时把该字体图标的实体字符写到文本中 -->
  15.     <span class="iconfont">&#xe612;</span>
  16.     <!-- 方式二：class方式 -->
  17.     <!-- 第一步：页面引入图标下面生成的iconfont.css文件，注意相对位置的问题 -->
  18.     <!-- 第二步：页面中需要用到iconfont的地方，加个类名：iconfont+空格+字体图标的名字 -->
  19.     <span class="iconfont icon-shezhi1"></span>
  20. </body>
  21. </html>

二、媒体查询

1、笔记

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

2、实例演示

  1.  <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>响应式布局(media queries)模块</title>
  8.         <style>
  9.         /* 1.没有媒体查询之前，页面的样式设置 */
  10. /* 使用float布局 */
  11. body,h2 {
  12.     margin:0;
  13.     padding:0;
  14.     color:white;
  15. }
  17. #main,header,aside,footer {
  18.     background-color: rgb(100, 100, 100);
  19.     margin:5px 0;
  20. }
  22. h2 {
  23.     text-align:center;
  24.     font-size:3em;
  25. }
  27. #container {
  28.     width:960px;
  29.     margin:0 auto;
  30. }
  32. header {
  33.     float:left;
  34.     width:100%;
  35.     line-height:100px;
  36. }
  38. #left {
  39.     float:left;
  40.     width:200px;
  41.     line-height:400px;
  42. }
  43. #main {
  44.     float:left;
  45.     width:540px;
  46.     line-height:400px;
  47.     margin-left:10px;
  48. }
  50. #right {
  51.     float:right;
  52.     width:200px;
  53.     line-height:400px;
  54. }
  55. footer {
  56.     float:left;
  57.     width:100%;
  58.     line-height:80px;
  59. }
  61. /* 以下应用媒体查询，进行响应式布局， */
  62. /* 1.屏幕宽度在1024px以上使用的样式，类似于电脑*/
  63. @media (min-width:1024px){
  64.     h2 {
  65.         text-align:center;
  66.         font-size:3.5rem;
  67.         color:yellow;
  68.     }
  69.     #container {
  70.         width:960px;
  71.         margin:0 auto;
  72.     }
  73.     header {
  74.         float:left;
  75.         width:100%;
  76.     }
  77.     #left {
  78.         float:left;
  79.         width:200px;
  80.     }
  81.     #main {
  82.         float:left;
  83.         width:540px;
  84.         margin-left:10px;
  85.     }
  86.     #right {
  87.         float:right;
  88.         width:200px;
  89.     }
  90.     footer{
  91.         float:left;
  92.         width:100%;
  93.     }
  94. }
  96. /* 2.屏幕宽度在640px以上，1024px以下使用的样式，类似平板电脑 */
  98. @media screen and (min-width:640px) and (max-width:1023px) {
  99.     h2{
  100.         text-align:center;
  101.         font-size:2.5rem;
  102.         color:#f0f;
  103.     }
  104.     #container {
  105.         width:600px;
  106.         margin:0 auto;
  107.     }
  108.     #left {
  109.         float:left;
  110.         width:160px;
  111.     }
  112.     #main {
  113.         float:left;
  114.         margin-left:10px;
  115.         width:430px;
  116.     }
  117.     /* 次要区块可以不在屏幕显示 */
  118.     #right {
  119.         display:none;
  120.     }
  121. }
  122. /* 3.屏幕宽度在640px以下使用的样式，从上到下排列5行显示  */
  123. @media screen and(max-width:639px) {
  125.     h2 {
  126.         text-align:center;
  127.         font-size:3.5rem;
  128.         color:#0f0;
  129.     }
  130.     #container {
  131.         width:400px;
  132.         margin:0 auto;
  133.     }
  134.     #left {
  135.         float:left;
  136.         width:100%;
  137.         line-height:100px;
  138.     }
  139.     #main {
  140.         float:left;
  141.         margin-left:0;
  142.         width:100%;
  143.         line-height:200px;
  144.     }
  145.     #right{
  146.         width:100%;
  147.         float:left;
  148.         line-height:100px;
  149.     }
  150. }
  151. </style>
  152. </head>
  153. <body>
  154.     <section id="container">
  155.         <header>
  156.             <h2>header</h2>
  157.         </header>
  158.         <aside id="left">
  159.             <h2>left</h2>
  160.         </aside>
  161.         <section id="main">
  162.             <h2>main</h2>
  163.         </section>
  164.         <aside id="right">
  165.             <h2>right</h2>
  166.         </aside>
  167.         <footer>
  168.             <h2>footer</h2>
  169.         </footer>
  170.     </section>
  171. </body>
  172. </html>
上一条：1028作业 - 使用Grid + Flex实现防手机淘宝下一条：前端开发20221027
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多