前端入门之响应式布局

响应式、、百分比布局、媒体查询 、em和rem、vw和vh

---

viewport

• width=device-width 设置宽度为屏幕宽度
• maximum-scale=1.0 最大缩放比例为1.0
• minimum-scale=1.0 最小缩放比例为1.0
• user-scalable=no 静止用户捏合操作
• initial-scale=1.0 初始化的缩放比例

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

百分比布局

• 没有定位的情况下

  1. 宽高设置百分比相对于父元素的宽高，例如div的相对于body的宽高
  2. margin和padding相对于父元素的宽度

• 定位情况

  1. 宽高设置百分比，相对于定位父元素的宽高
  2. 定位的left和right相对于有定位的父元素的宽度 top和bottom相对于有定位父元素的高度

媒体查询

在不同屏幕大小下定制样式

---

• 宽度大于某个值时的样式

  @media screen and (min-width:宽度){
    样式
  }
  

• 宽度小于某个值的样式

  @media screen and (max-width:宽度){
    样式
  }
  

• 在最大值和最小值内的样式

  @media screen and (min-width:最小值) and (max-width:最大值){
    样式
  }
  

• 除某个范围内的样式

  @media not screen and (min-width:最小值) and (max-width:最大值){
    样式
  }
  

• 可以使用link引入外部文件link和media属性中媒体查询

  <link rel="stylesheet" href="./CSS/ipad.css" media="screen and (min-width:768px) and (max-width:920px)">
  

• 浏览器大小使用 min-width 和 max-width 判断

• 屏幕大小使用 min-device-width 和 max-device-width 判断

em和rem、vw和vh

• em: 相对于最近的父元素的font-size的大小
• rem: 相对于html的字体大小
• vw: 相对于可视窗口的宽度
• vh: 相对于可是窗口的高度