关于流式布局&rem和em做移动端适配

目录

流式布局

rem

em

---

流式布局

• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
• max-width 最大宽度（max-height 最大高度）
• min-width 最小宽度 （min-height 最小宽度）
• 例如：div盒子宽度占满屏幕，则div的width为100%父元素

• .div {
      width:100%
      height:200px
  }
  
  .h3 {
      width: 80%
      height:30px
      font-size:20px
  }

rem

• rem（font size of the root element）是指相对于根元素的字体大小的单位,简单的说它就是一个相对单位
• 例如：根元素的font-size是 14px；1rem就是14px，div宽度是42px，换算下来是3rem

• div {
     width:3rem;
     height:1.29rem;
  }
  
  h1 {
      width:5.45rem;
      height:0.42rem;
  }

em

• em࿰