2017.2.21(响应式)

media query的使用方法

一、判断媒体类型，引用不同的样式表

<link rel=”stylesheet” media=”screen and (判断条件)” herf=”需要调用的样式表文件” />

手机上打开这个网页的话，如果做响应式布局，还要在head区域加上如下代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=yes"/>
<meta name="msapplication-tap-highlight" content="no" />
如果不是很明白，就直接粘贴过去使用就可以了。
width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no 大概意思是，网页宽度采用设备宽度，缩放比例为1，不允许用户缩放操作，
以上的头部声明是手机端页面的标配。

二、 默认为手机端样式（从小到大）

// 等于或大于 34*16 = 544px（手机横屏）
@media (min-width: 34em) { ... }

// 等于或大于 48*16 = 768px(平板竖屏)
@media (min-width: 48em) { ... }

// 等于或大于 62*16 = 992px（pc窄屏）
@media (min-width: 62em) { ... }

// 等于或大于 75*16 = 1200px（ pc宽屏）
@media (min-width: 75em) { ... }

// pc超大屏 1380px
@media (min-width: 1380px) { ... }

二、 默认为pc端样式（从大到小）
@media (max-width: 1380px) { ... }
@media (max-width: 1200px) { ... }
@media (max-width: 992px) { ... }
@media (max-width: 768px) { ... }
@media (max-width: 544px) { ... }