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

桃扇骨 2023-02-17 03:18 10阅读 0赞

### 媒体查询 ###

**概念**：

*  可以让我们根据设备显示器的特性（如`视口宽度、屏幕比例、设备方向：横向或纵向`）为其设定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`文档中添加以下代码，用来兼容移动设备的显示效果**

*  是否允许屏幕缩放

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页面窗口自动调整到设备宽度并禁止用户缩放页面

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

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

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

1.  隐藏状态栏

**viewport**

设置viewport

每个属性对应的意思是：

*  `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值

1.  但是“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；}
    }

**移动端屏幕尺寸**

**rem+js**