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

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

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

字体图标和媒体查询

一、字体图标——iconfont

1、笔记

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

2、字体图标的优点

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

3、字体图标的使用

  • 我们常用的是阿里巴巴的字体图标https://wwww.iconfont.cn>
  • 字体图标的使用方式有三种
    • unicode方式
    • class方式
    • symbol方式
  • 我们常用的是unicodeFont 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. }
  16. #main,header,aside,footer {
  17. background-color: rgb(100, 100, 100);
  18. margin:5px 0;
  19. }
  20. h2 {
  21. text-align:center;
  22. font-size:3em;
  23. }
  24. #container {
  25. width:960px;
  26. margin:0 auto;
  27. }
  28. header {
  29. float:left;
  30. width:100%;
  31. line-height:100px;
  32. }
  33. #left {
  34. float:left;
  35. width:200px;
  36. line-height:400px;
  37. }
  38. #main {
  39. float:left;
  40. width:540px;
  41. line-height:400px;
  42. margin-left:10px;
  43. }
  44. #right {
  45. float:right;
  46. width:200px;
  47. line-height:400px;
  48. }
  49. footer {
  50. float:left;
  51. width:100%;
  52. line-height:80px;
  53. }
  54. /* 以下应用媒体查询,进行响应式布局, */
  55. /* 1.屏幕宽度在1024px以上使用的样式,类似于电脑*/
  56. @media (min-width:1024px){
  57. h2 {
  58. text-align:center;
  59. font-size:3.5rem;
  60. color:yellow;
  61. }
  62. #container {
  63. width:960px;
  64. margin:0 auto;
  65. }
  66. header {
  67. float:left;
  68. width:100%;
  69. }
  70. #left {
  71. float:left;
  72. width:200px;
  73. }
  74. #main {
  75. float:left;
  76. width:540px;
  77. margin-left:10px;
  78. }
  79. #right {
  80. float:right;
  81. width:200px;
  82. }
  83. footer{
  84. float:left;
  85. width:100%;
  86. }
  87. }
  88. /* 2.屏幕宽度在640px以上,1024px以下使用的样式,类似平板电脑 */
  89. @media screen and (min-width:640px) and (max-width:1023px) {
  90. h2{
  91. text-align:center;
  92. font-size:2.5rem;
  93. color:#f0f;
  94. }
  95. #container {
  96. width:600px;
  97. margin:0 auto;
  98. }
  99. #left {
  100. float:left;
  101. width:160px;
  102. }
  103. #main {
  104. float:left;
  105. margin-left:10px;
  106. width:430px;
  107. }
  108. /* 次要区块可以不在屏幕显示 */
  109. #right {
  110. display:none;
  111. }
  112. }
  113. /* 3.屏幕宽度在640px以下使用的样式,从上到下排列5行显示 */
  114. @media screen and(max-width:639px) {
  115. h2 {
  116. text-align:center;
  117. font-size:3.5rem;
  118. color:#0f0;
  119. }
  120. #container {
  121. width:400px;
  122. margin:0 auto;
  123. }
  124. #left {
  125. float:left;
  126. width:100%;
  127. line-height:100px;
  128. }
  129. #main {
  130. float:left;
  131. margin-left:0;
  132. width:100%;
  133. line-height:200px;
  134. }
  135. #right{
  136. width:100%;
  137. float:left;
  138. line-height:100px;
  139. }
  140. }
  141. </style>
  142. </head>
  143. <body>
  144. <section id="container">
  145. <header>
  146. <h2>header</h2>
  147. </header>
  148. <aside id="left">
  149. <h2>left</h2>
  150. </aside>
  151. <section id="main">
  152. <h2>main</h2>
  153. </section>
  154. <aside id="right">
  155. <h2>right</h2>
  156. </aside>
  157. <footer>
  158. <h2>footer</h2>
  159. </footer>
  160. </section>
  161. </body>
  162. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议