简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 字体图标和媒体查询实例
Blogger Information
Blog 27
fans 1
comment 2
visits 90241
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
字体图标和媒体查询实例
          
Original
741 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>1025作业</title>
  7. <!--    作业内容：-->
  8. <!--    1. 实例演示字体的图标的使用,重点在class方式 -->
  9. <!--    2. 实例演示媒体查询原理,并描述媒体查询的顺序-->
  10. </head>
  11. <link rel="stylesheet" href="../img/iconfont/iconfont.css">
  12. <style>
  13.     .icon-shouye{
  14.         color: green;
  15.         font-size: 21px;
  16.     }
  17.     .icon-zhuce:hover{
  18.         color: blue;
  19.     }
  20. </style>
  21. <body>
  22. <h3>1. 实例演示字体的图标的使用,重点在class方式</h3>
  23. <!--注意：图标采用下载本地引用-->
  24. <!--字体图标的字体代码需要放到clas类里面-->
  25. <i class="iconfont icon-shouye">首页图标</i>
  26. <span><i class="iconfont icon-zhuce">注册图标</i> </span>
  27. <h3>2. 实例演示媒体查询原理,并描述媒体查询的顺序</h3>
  28. <pre>媒体查询字面含义：
  29.      媒体: 屏幕, 手机, 打印机
  30.      查询: 查询媒体宽度来确定元素展示方式</pre>
  31. <div class="iup1"><label>1 <input type="text" placeholder="框1:设置字体大小56px"></label></div>
  32. <div class="iup2"><label>2 <input type="text" placeholder="框2:设置红色字体"></label></div>
  33. <div class="iup3"><label>3 <input type="text "placeholder="框3:设置边框线蓝色"></label></div>
  35. <style>
  36.     /*默认字体大小1rem =10px*/
  37.     html{font-size: 10px}
  40.     .iup1>label{font-size: 1rem}
  41.     /*如果设备尺寸小于于400px,设置框1字体大小为56px,框2的字体颜色为红色，框3的边框线蓝色*/
  42.     @media (max-width: 400px) {
  43.        html{ font-size:10px;}
  44.         .iup1>label{font-size:4rem }
  45.         .iup2{color: red}
  46.         .iup3{border: 1px solid blue}
  47.     }
  48.     /*如果设备尺寸在450px~475pxpx之间，框1背景颜色修改为绿色，body背景颜色改为#d9dbda，html根字号改为15px */
  49.     @media (min-width: 450px) and (max-width: 475px){
  50.         .iup1{background-color: green}
  51.         body {background-color: #d9dbda}
  52.         html {font-size: 15px}
  53.     }
  54. </style>
  55. </body>
  56. </html>

运行结果：

要求解析：设备尺寸小于400px,设置框1字体大小为56px,框2的字体颜色为红色，框3的边框线蓝色

设备尺寸小于400px时的变化

要求解析： 如果设备尺寸在450px~475pxpx之间，框1背景颜色修改为绿色，body背景颜色改为#d9dbda，html根字号改为15px

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！