HTML基础拓展

HTML基础拓展

响应式布局

• 概念：根据不同的分辨率，显示不同的样式
• 主要修改的样式：
  • 元素的隐藏与显示
  • 宽度
  • 浮动排列
  • 文本对齐方式
  • 字体大小
• 优点：适配性好
• 优点：
  • 增大工作量
  • 出现大量的隐藏元素，导致代码量冗余
  • 一般用在小网站

媒体查询

  @media 设备类型 and (媒体特性){}

• 设备类型
  • all 所有的设备
  • screen 显示器/笔记本/移动端设备
  • print 打印机
• 媒体特性
  • min-width(比最小值大)/max-width(比最大值小)
  • 媒体特性的值后面不要加分号
  • 多个媒体特性之间用and连接
  • and两侧必须有空格

    <style>
      /* @media 设备类型 and 媒体特性{} */
      /* 设备宽度>1000 body显示红色 */ 
      @media screen and (min-width:1000px) {
          body {
              background-color: red;
          }
      }
      /* 设备宽度500-1000 body显示蓝色 */
      
      @media screen and (min-width:500px) and (max-width:999px) {
          body {
              background-color: blue;
          }
      }
      /* 设备宽度<500 body显示粉色 */
      
      @media screen and (max-width: 499px) {
          body {
              background-color: pink;
          }
      }
  </style>

移动端

单位

• rem:相对单位。参照物与em不同，不是父级元素，而是HTML元素

  PC 端项目不用这个单位
  在移动端基本不会使用px 取而代之的是rem
  

• vm:页面尺寸宽度的1% 根据屏幕修改大小适合使用vm vh

  /*图片宽度转为vw*/
  1.图片的宽度(W)
  2.100vw=W  =>1vw=(W/100)px
  3.html{font-size:Y;Y(为100px/1vw)}
  

• vh: 页面尺寸高度的1%

根元素单位转换

• 设计图宽度750/设备宽度 375px
  1rem = 100px
  100vw = 375px
  1rem = ??vw 1rem = 26.667vw
• 设计图宽度640/设备宽度 320px
  1rem = 100px
  100vw = 320px
  1rem = ?? vw 1rem = 31.25vw

布局

• 百分比布局(流式布局)

• rem布局(等比缩放布局)

  • 观察设计图大小，确定dpr,在ps图像-》图像大小，修改图像所对应的宽度(根据量取的值/dpr)
  • 设置HTML标签的font-size:26.667vw或者24.154vw。
    • 100vw = 设备分辨率 ( 设计图 / dpr ) 414
    • 1vw = 414px / 100 = 4.14px
    • 100px = 100/1vw(4.14px) = 24.154vw
  • 在设计图里正常测量，测量出来的结果是以px单位结尾的，我们写代码的时候要把这个px换算成rem，此时px和rem的比例就是1rem:100px

  height:0.9rem;

• 混合布局(百分比+rem)

雪碧图

又名“精灵图”

本质

将项目中所有的小图进行整合，整合为一张大图，然后使用背景图片和background-position属性来进行定位，进而显示出整张大图里某一个小的区域。

优势

服务器端硬盘的寻址压力，减少HTTP请求次数；繁忙的网站有必要使用，但不繁忙的网站完全没有必要。

劣势

1. 使用麻烦
2. 维护起来不能改变原有图片的位置。

注意事项

1.确定装载图片的容器，并为其设置宽高（图标的宽高）。
2.为装载图片的容器设置background-image属性。
3.测量要使用的图标在雪碧中的相对位置。
4.为装载容器设置background-position属性，属性值就为刚刚量取的相对位置（该值都为负值，没有特性情况）。