简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 常用单位与图标引用以及移动媒体总结与实例
Blogger Information
Blog 25
fans 1
comment 0
visits 12878
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
常用单位与图标引用以及移动媒体总结与实例
xueblog9的进阶之旅
Original
342 people have browsed it

常用单位与图标引用以及移动媒体

  1. 绝对单位：像素px，1in = 96px
  2. 相对单位：必须要有一个参照物
    2.1 %：参照物父级
    2.2 em：字号大小，参照浏览器默认字号16px
    1.  2.2.1 em：受当前或它的祖先元素的font-size影响
    2.  2.2.2 em：是一个变量，受自身或父级font-size影响
    3.  2.2.3 em：rem：与em概念基本一致，不过它总是以html标签为准
    4.  2.2.4 :root：设置根元素样式
    5.  2.2.5 浏览器字体有最小像素限制，谷歌是12，其他属性应该也有默认值
    2.3 vw: view-width:可视窗口的宽度，可视宽度默认平均分为100份(100vw)
    2.4 vh: view-hight：可视窗口的宽度，可视高度默认平均分为100份(100vh)
    2.5 view-port：可视窗口—眼睛能看到的窗口大小
  3. 添加表格线：一定要添加到单元格中th和td上添加：border：1px solid
  4. 折叠线：border-collapse:collapse;
  5. 对表格进行一些布局设置
    5.1 块级元素在父级中的居中：margin：auto；
    5.2 文本水品居中：text-align：center；
    5.3 标题设置外边距，可以调整位置；
  6. 引入字体图标库，用link标签，css样式的一种，可直接引用，但是建议导入自定义样式css代码中，再用link标签引入自定义css代码
    6.1 图标库下载地址：iconfont.cn
    6.2 图标库使用时，在自定义css代码中@import 根据路劲导入iconfont.css文件
    6.3 用span标签引入图标定义类名，该类名用于css代码更改样式使用
    6.4 图标可以当作文本处理，具有文本一切样式属性，如，字体大小，颜色，背景色等
  7. 响应式/ 移动端布局基础：媒体查询（媒体指的是硬件）
    7.1 媒体：屏幕（手机，pc），打印机
    7.2 查询：获取媒体当前的状态，理解就是获取尺寸分辨率等
    7.3 布局前提：用户在一个“宽度受限，而高度随着内容增长的空间内，进行布局
    7.4 为了页面适配不同的移动端屏幕大小，只要动态设置根字号，盒子大小通过可视窗口配置的百分比去分配
    7.5 @media元素设置（max-width）以及（min-width），设置区间用and连接，html{font-size：12px}

图标引用以及移动媒体实例

  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>常用单位与图标作业</title>
  8.     <link rel="stylesheet" href="zuoye.css">
  9. </head>
  10. <body>
  11.     <!-- <div class="box">
  12.         <span class="iconfont icon-taobaolianmengzi2 taobao"></span>
  13.     </div> -->
  14.     <div class="da">
  15.         <div class="box" box1><span class="iconfont icon-taobaolianmengzi2 taobao"></span></div>
  16.         <div class="box" box2><span class="iconfont icon-taobaolianmengzi2 taobao"></span></div>
  17.         <div class="box" box3><span class="iconfont icon-taobaolianmengzi2 taobao"></span></div>
  18.     <div>
  19. </body>
  20. </html>

css代码

  1. @import 'font_taobao/iconfont.css';
  3. .da {
  4.     width: 92vw;
  5.     height: 40vh;
  6.     margin-top: 50px;
  7.     border:2px solid red;
  8.     overflow: auto;
  9. }
  11. .box {
  12.     width: 29vw;
  13.     height: 80vh;
  14.     float: left;
  15.     text-align: center;
  16.     line-height: 40vh;
  17.     margin-right: 1vw;
  18.     background-color: blue;
  19. }
  21. html {
  22.     font-size: 10px;
  23. }
  25. .taobao {
  26.     font-size: 5em;
  27.     color: red;
  28.     box-shadow: 2px 2px 2px #111;
  29.     border: 2px solid #111;
  30.     background-color: white;
  31. }
  33. @media (min-width: 1919px) {
  34.     html {
  35.         font-size: 16px;
  36.     }
  37. }
  39. @media (min-width: 1080px) and (max-width:1918px) {
  40.     html {
  41.         font-size: 14px;
  42.     }
  43. }
  45. @media (min-width: 720px) and (max-width:1079px) {
  46.     html {
  47.         font-size: 12px;
  48.     }
  49. }

像素为1086px时，字体大小变化

像素为775px时，字体大小变化

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！