移动端布局之—媒体查询及先响应式网站设计（总结）huangfuyk.的博客-

媒体查询

概念：

• 可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式；
• 使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果；
• 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成；
• 媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。
• 媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式

例：

@media 设备类型 and (设备特征){   div{ width:100px;height:100px;}  } 

怎么使用media？

（1） CSS 2 支持以下9种媒体类型——注意：媒体类型名区分大小写

1. braille：触觉反馈设备
2. embossed ：盲文印刷设备
3. handheld ：小型或手持设备
4. print ：打印机
5. projection ：投影图像，如幻灯
6. screen ：计算机显示器
7. speech ：语音合成器
8. tty ：打字机
9. tv ：电视类
10. all：所有

（2）Media所有参数汇总

1. width:浏览器可视宽度。
2. height:浏览器可视高度。
3. device-width:设备屏幕的宽度。
4. device-height:设备屏幕的高度。
5. orientation:检测设备目前处于横向还是纵向状态。(landscape/portrait)
6. aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
7. device-aspect-ratio:检测设备的宽度和高度的比例。
8. color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色，向所有能显示颜色的设备应用样式表）
9. color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
10. monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
11. resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
12. grid:检测输出的设备是网格的还是位图设备，如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0。

（3）使用media需要在html文档中添加以下代码，用来兼容移动设备的显示效果

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

• 是否允许屏幕缩放

  width=device-width:宽度等于当前设备的宽度    initial-scale=1：初始的缩放比例（默认为1）    maximum-scale=1：允许用户缩放到得最大比例（默认为1）    user-scalable=no：用户不能手动缩放 

• 手机等小屏幕手持设备

@media screen and (min-width: 320px) and (max-width: 480px) {} 

• 平板之类的宽度 1024 以下设备

 @media only screen and (min-width: 481px) and (max-width: 1024px) {} 

• PC客户端或大屏幕设备: 1024px 至更大

@media only screen and (min-width: 1025px) {} 

移动端相关

meta标签设置

1. HTML5页面窗口自动调整到设备宽度并禁止用户缩放页面

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

2. 忽略将页面中的数字识别为电话号码（iPhone会将看起来像电话号码的数字添加电话连接，应当关闭）

<meta name="format-detection" content="telephone=no" /> 

3. 忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content= " email=no" /> 

4. 通过快捷方式打开时全屏显示

<meta name="apple-mobile-web-app-capable" content="yes" /> 

5. 隐藏状态栏

<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

viewport

设置viewport

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

每个属性对应的意思是：

• width：设置layout viewport的宽度（正整数）
• height：设置layout viewport的高度（正整数）
• initial-scal：设置页面的初始缩放（数字（可带小数））
• maximum-scale：允许用户的最大缩放值（数字（可带小数））
• minimum-scale：允许用户的最小缩放值（数字（可带小数））
• user-scalable：是否允许用户进行缩放

DPR

• 设备像素比(device pixel ratio )简称dpr
• 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系。
  公式：
• 设备像素比 = 物理像素 / 逻辑像素(px)

dpr > 1  高清屏 dpr = 1  普通屏 

注：ppi和dpi都指屏幕像素密度，Android喜欢用dpi，IOS喜欢用ppi 

rem、em

1. px为单位
   使用“px”来设置文本比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。因此，提出了使用“em”来定义Web页面的字体。
2. em为单位
   使用 “px”为单位是比较方便，而又一致，但在浏览器中放大或缩放浏览页面时会存在一个问题，要解决这个问题，我们可以使用“em”单位。

1 ÷ 父元素的font-size × 需要转换的像素值 = em值 

3. 但是“em”是相对于其父元素来设置字体大小，这样又会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素< html>，所以我们只需要在根元素确定一个参考值（例：16px）。

媒体查询+rem

@media all and (max-width:320px){   html{font-size：12px；} } @media all and (max-width:321px) and (max-width:375px){   html{font-size：14px；} } @media all and (min-width:376px){   html{font-size：16px；} } 

移动端屏幕尺寸

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="email=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

rem+js

<script>                window.onload = function(){   var html = document.querySelector("html");      html.style.fontSize = html.offsetWidth / 750 * 100 + "px";       addEventListener("resize",function(){                html.style.fontSize = html.offsetWidth / 750 * 100 + "px";       },false); } </script>