简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 2022.10.25第九课：字体图标与媒体查询的学习
Blogger Information
Blog 14
fans 0
comment 0
visits 7469
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2022.10.25第九课：字体图标与媒体查询的学习
启动未来
Original
522 people have browsed it

字体图标和媒体查询

一、字体图标——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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：添加上运行示例图就更好了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！