笔记（二）

meta：content->tab

### 视口

```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```

- 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
- 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
  + 视口的宽度
  + initial-scale：初始化缩放
  + user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
  + minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
  + maximum-scale:最大缩放

meta:vp->tab

### 条件注释

- 条件注释的作用就是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略掉

<!-- html5shiv让浏览器可以识别HTML5的新标签 -->
<!-- respond让低版本浏览器可以使用CSS3的媒体查询 -->

## mediaquery

```css
@media (判断条件（针对于当前窗口的判断）){
    /*这里的代码只有当判断条件满足时才会执行*/
}

@media (min- 768px) and (max- 992px) {
  /*这里的代码只有当(min- 1280px)满足时才会执行*/
  .container {
    750px;
  }
}
```

- 当使用min-width作为判断条件一定要从小到大，其原因是CSS从上往下执行

- 在一个较小屏幕下展示一个超宽的图片，想让图片居中显示
  + 背景图
  + p-a l 50% m-l -width/2