Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 常用的单位、表格样式、字体图标和媒体查询
Blogger Information
Blog 19
fans 0
comment 0
visits 8372
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
常用的单位、表格样式、字体图标和媒体查询
Wu.Ang
Original
627 people have browsed it

常用的单位、表格样式、字体图标和媒体查询

常用的单位

  1. 绝对单位:像素 px , 1 英寸=96px

  2. 相对单位:必须要有一个参照物

    2.1 % : 参照物父级

    2.2 em:字号大小,参考浏览器默认字号,通常为 16px
    是一个变量,受当前或它的祖先元素的 font-size 影响
    缺点:不统一

    2.3 rem:与 em 的概念基本一致,它总是以<html>的字号为参照物

    2.4 vw: view-width 可视窗口的宽度(眼睛能看到的窗口大小 view-port)

    2.5 vh: view-heigh 可视窗口的高度

表格常用样式

1.1 添加表格线(添加到单元格上)

  1. table td,
  2. table tr {
  3.   border: 1px solid;
  4. }

1.2 折叠表格线

  1. table {
  2.   border-collapse: collapse;
  3. }

1.3 布局设置

  1. table {
  2.   /* 块级元素在父级水平居中 */
  3.   margin: auto;
  4.   /* 文本水平居中 */
  5.   text-align: center;
  6. }

字体图标(最常用 iconfont 阿里巴巴矢量图标库)

1.1 引入字体图标库

<link rel="stylesheet" href="">

1.2 引入图标类(用什么图标就添加对应的 class)

字体图标,可以设置字号来控制大小

<div class="iconfont icon-xxx"></div>

  1. /* css文件引用外部css文件 */
  2. @import "文件路径";

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>css样式插入图标并改变图标样式</title>
  8.     <link rel="stylesheet" href="Untitled-1.css" />
  9.   </head>
  10.   <body>
  11.     <button class="iconfont icon-bluetoothoff bluetoothoff"></button>
  12.   </body>
  13. </html>
  1. @import "font_icon/iconfont.css";
  3. * {
  4.   margin: 0;
  5.   padding: 0;
  6.   box-sizing: border-box;
  7. }
  9. body button {
  10.   width: 200px;
  11.   height: 120px;
  12. }
  13. button.bluetoothoff {
  14.   font-size: 100px;
  15. }
  16. /* 鼠标悬停 */
  17. button.bluetoothoff:hover {
  18.   cursor: pointer;
  19.   background-color: aquamarine;
  20. }
  21. /* 点击后隐藏 */
  22. button.bluetoothoff:active {
  23.   /* opacity: 0; */
  24.   display: none;
  25. }

图片

插入图标

js 插入

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>js插入图标</title>
  8.     <style>
  9.       .icon {
  10.         width: 100px;
  11.         height: 100px;
  12.         vertical-align: -0.15em;
  13.         fill: currentColor;
  14.         overflow: hidden;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <svg class="icon" aria-hidden="true">
  20.       <use xlink:href="#icon-bluetoothon"></use>
  21.     </svg>
  22.   </body>
  23.   <script src="font_icon/iconfont.js"></script>
  24. </html>

媒体查询 : 响应式或移动端布局基础

  1. 1.媒体 : 屏幕(手机、pc)、打印机
  2. 2.查询 : 获取媒体当前状态
  3. 3.布局前提 :用户在一个"宽度受限,而高度随内容增长的空间"内进行布局
  4. 4.px是绝对值,不能用在媒体查询中,只能使用相对值

1.移动优先 : 先从最小屏的设备进行适配

  1. :root{
  2.     /* 为了方便计算,把根字号设置为10px */
  3.     font-size = 10px;
  4. }
  5. /* 只要动态的设置根字号,就能实现动态的改变页面元素大小 */
  6. /* 断点:375、414、600,由小到大 */
  7. /* 像素小于374px,根字号为12px */
  8. @media (max-width: 374px){
  9.     html{
  10.         font-size:12px;
  11.     }
  12. }
  13. /* 像素大于374px,小于414px,根字号为14px */
  14. @media (min-width:375px) and (max-width: 413px){
  15.     html{
  16.         font-size:14px;
  17.     }
  18. }
  19. /* 像素大于413px,根字号为16px */
  20. @media (min-width: 414px){
  21.     html{
  22.         font-size:16px;
  23.     }
  24. }

2.pc 优先 : 先从最大屏的设备进行适配

  1. /* 断点:1000、800、600,由大到小 */
  2. /* 像素大于1000px,根字号为16px */
  3. @media (min-width: 1000px) {
  4.   html {
  5.     font-size: 16px;
  6.   }
  7. }
  8. /* 像素大于800px,小于1000px,根字号为14px */
  9. @media (min-width: 800px) and (max-width: 999px) {
  10.   html {
  11.     font-size: 14px;
  12.   }
  13. }
  14. /* 像素大于600px,小于800px,根字号为12px */
  15. @media (min-width: 600px) and (max-width: 799px) {
  16.   html {
  17.     font-size: 12px;
  18.   }
  19. }
  20. /* 像素小于600px,根字号为10px */
  21. @media (max-width: 599px) {
  22.   html {
  23.     font-size: 10px;
  24.   }
  25. }




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