浏览器分辨率自适应之CSS媒体查询Media详解

SS媒体查询允许我们基于浏览网站的设备的特性来应用不同的样式申明，最常用的特性是视口宽度。通过查询视口宽度，我们可以实现如下功能：站点默认为两列式布局，如果屏幕（适口）宽度超过40em，则变成三列式布局。

1、媒体查询操作方式

实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。

2、媒体查询结构

@media only screen and (min-width:40em) { 
  body { background-color:blue;} 
}

2.1 @media

以@media开头来表示这是一条媒体查询语句。

2.2 screen

紧跟在@media后面的是一个或者多个表达式，可以判别为真或假。在创建媒体查询时，必须以媒体类型（此处为screen）作为第一个表达式：@media only screen。与媒体类型相对应的有：print（打印机）、braille（盲文）或者all（全部）等其他类型。

2.3 and

and是一个关键字，表示有多个表达式，screen是第一个表达式，and后为另一个表达式。需前后表达式都为真时，整条查询结果才为真（也就是“且”的意思）。与and相对应的关键字有：or、not等。

2.4 (min-width:40em)

and之后的(min-width:40em)为第二个表达式（表达式在小括号内），所有的表达式都应包含在括号内，除非它是只有一个单词的媒体类型表达式（如：screen、print等）。

前缀min-表示“至少”，即“大于等于”的意思。

前缀max-表示“至多”，即“小于等于”的意思。

2.5 ｛｝

花括号里面的内容表示整条媒体查询结果为真时的CSS 样式。

在使用媒体查询时，不要把所有样式都放入媒体查询中。正确做法是先声明适用于所有视口宽度的非媒体查询样式，然后只是用媒体查询去覆盖掉在特定宽度中用到的样式。

body { background-color:green; } 
@media only screen and (min-width:40em) { 
  body {background-color:blue;} 
}

3、在样式表链接中使用媒体查询

4、媒体特性

媒体查询可以查询许多媒体特性，如：视口宽度和高度、屏幕宽度和高度、方向、宽高比和分辨率（屏幕上每个维度上的像素个数）等。

其中大多数都可以加上min-或max-前缀。

4.1 视口宽度和高度（媒体查询中最常用到的设备属性）

视口宽度：width
视口高度：height

视口指的是浏览器窗口中实际包含网页的那部分区域。浏览器窗口减去页面边上的滚动条，以及顶部或底部的工具栏和菜单，剩下的区域就是视口。

4.2 屏幕宽度与高度

屏幕宽度：device-width
屏幕高度：device-height

@media only screen and (max-device-width:40em) {...}

4.3 方向

方向：orientation

值为：横排方向（landscape）竖排方向（portrait）

@media only screen and (orientation:landscape) {...}

4.4 宽高比

视口宽高比：aspect-ratio
设备屏幕宽高比：device-aspect-ratio

常见的显示器宽高比时16:9（如19201080或1366768像素）或者是16:10（1280800）。iphone 3和iphone 4s是3:2（480320和960640），而iPhone 5则是16:9（1136640）。安卓手机通常是4:3、3:2、16:10或16:9。

@media only screen and (min-device-aspect-ratio:16/9) {...}

4.5 分辨率

设备屏幕的分辨率：resolution

@media only screen and (resolution:3oodpi) {...}

4.6其他媒体特性

color
color-index
monochrome
scan
grid

5、浏览器支持

需要担心的浏览器是IE8及其更早版本。

当需要在IE8及其更早版本中使用媒体查询时，我们可以使用条件注释使代码仅针对Internet Explorer。

条件注释也是一种查询，出现在HTML 中，而不是CSS中。

为了让网站能在老版的IE中正确显示，需要使用polyfill或利刃shive脚本。我们所要做的就是下载这个文件，然后在<head>元素中链接他，如：

前2篇文章讲了《为什么375×667是移动端原型设计的最佳分辨率如何设置手机APP原型尺寸

所谓的APP原型适配手机，是指用手机浏打开原型页面的时候，横竖都刚好撑满屏幕。当然如果页面比较长，高度超过一屏是没问题的。

如果你的原型是你手机屏幕的逻辑分辨率

比如你的原型是375×667，手机是iPhone6/6s/7，那在手机上查看的时候无需缩放，默认撑满屏幕。

如果你的原型是360×640，而手机是Android的小米4、小米note、华为p7、p8荣耀6、7这些主流机型，也是一样的。

如果你的原型不是你手机屏幕的逻辑分辨率

比如你的原型是375×667,而你的手机是华为p8，1080×1920。理论上来说无法完美适配APP中所有的页面。但是除了有下导航的页面一般都没问题。

设置生成原型的手机参数

你需要在Axure生成HTML的时候设置一下手机上如何展示原型。

请勾选包含视口标签。浏览器显示网页，默认是按照网页自身分辨率来展示的。勾选了此项之后，里面的区域按照下方规则来处理展示。

宽，使用默认的device-width即可。

高，一般不需要填，因为是根据宽度来决定的。

最小缩放倍数和最大缩放倍数，一般不需要填。

允许用户缩放，一般填写no。

初始缩放倍数怎么填

具体规则是原型页面的横向分辨率x初始缩放倍数xDPR参数=手机屏幕的横向分辨率。得出这个值填到上图中的对应位置。

而这里的DPR参数(devicePixelRatio)，代表的是设备像素和CSS像素的比例，下方的chrome网页调试中也揭示了这一点。

所以上面的华为p8应该设置为0.96，你可以根据机型去百度搜索对应的DPR参数是多少。

查看原型

在电脑上看

通过chrome-视图-开发者-开发者工具，切换到你想看的手机尺寸。同时也可以用这个工具去了解在其他机型上面的效果，以方面了解是不是需要单独适配。

当然safari的菜单栏-开发-响应者模式也可以。

在手机上看

请用手机浏览器打开该网页，请用手机浏览器打开该网页，最好生成到桌面查看效果。比如我设计的原型。

建议竖向减掉20px，因为Axure默认不显示顶部状态栏。

总结

建议你们下次设计APP原型的时候按照通用分辨率375×667来设置，次选方法是按照自己手机的逻辑分辨率来定尺寸。。

如果想明白为什么要这样设置，可以去搜索viewport和逻辑分辨率等概念。当然就使用而言，PM无需了解这些知识。

至于如何把原型放到手机上面查看，我们下次再讲。

SS 媒体查询是一种功能强大的技术手段，它可以根据不同的设备属性（例如视口宽度、屏幕比例、设备方向等）来应用不同的样式。这种技术在构建响应式和自适应设计方面具有巨大的优势，它能够确保您的网站在各种类型的设备上都呈现出良好的视觉效果。

基本语法

媒体查询的基本语法如下：

@media not|only mediatype and (expressions) {
  CSS-Code;
}

not：表示不匹配指定的媒体类型。
only：表示只匹配指定的媒体类型，这可以避免老旧浏览器执行不必要的样式表下载。
mediatype：指的是媒体类型，如 screen、print 等。
expressions：是一系列的媒体特性表达式，用来定义媒体查询的具体条件。

示例

一个简单的媒体查询示例：

/* 默认样式 */
body {
  background-color: lightblue;
}

/* 当视口宽度小于600px时，改变背景颜色 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

常见的媒体特性

一些常用的媒体特性包括：

width：视口的宽度。
height：视口的高度。
orientation：设备的方向（portrait 或 landscape）。
aspect-ratio：视口的宽高比。
device-pixel-ratio：设备的像素比率。
hover：设备是否支持悬停操作。
pointer：设备的指针精度。

我们可以针对手机、平板和电脑屏幕进行适配。

手机 - 通常屏幕宽度在 320px 到 480px 之间。
平板 - 屏幕宽度一般在 600px 到 1024px 之间。
电脑 - 屏幕宽度通常大于 1024px。

下面是针对这些设备的一个简单响应式布局示例。我们将使用一个简单的两栏布局，其中包含一个主要内容区域和一个侧边栏。侧边栏在手机屏幕上会被隐藏，在平板屏幕上会显示为下方的内容块，在电脑屏幕上则会显示为右侧的侧边栏。

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Layout Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Responsive Design Example</h1>
  </header>
  <div class="container">
    <main>
      <article>
        <h2>Main Content</h2>
        <p>This is the main content area. It will always be visible regardless of the device.</p>
      </article>
    </main>
    <aside>
      <h2>Sidebar</h2>
      <p>This is the sidebar with additional information. Its visibility and position will change based on the device type.</p>
    </aside>
  </div>
  <footer>
    <p>Footer Content</p>
  </footer>
</body>
</html>

CSS 样式

/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #f4f4f4;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header, footer {
  background: #555;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

header h1, footer p {
  margin: 0;
}

main, aside {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
}

/* 手机屏幕 */
@media (max-width: 480px) {
  aside {
    display: none; /* 隐藏侧边栏 */
  }
}

/* 平板屏幕 */
@media (min-width: 481px) and (max-width: 1024px) {
  aside {
    display: block; /* 显示侧边栏 */
    width: 100%; /* 侧边栏占据全宽 */
    margin-top: 20px; /* 添加顶部间距 */
  }
}

/* 电脑屏幕 */
@media (min-width: 1025px) {
  .container {
    display: flex;
    justify-content: space-between;
  }

  main {
    flex: 2; /* 主要内容占据2/3的宽度 */
  }

  aside {
    flex: 1; /* 侧边栏占据1/3的宽度 */
  }
}

解释

全局样式：设置基本的字体、颜色、间距等。
手机屏幕：当屏幕宽度小于或等于 480px 时，侧边栏将被隐藏。
平板屏幕：当屏幕宽度介于 481px 和 1024px 之间时，侧边栏将显示，并占据整个宽度，位于主要内容下方。
电脑屏幕：当屏幕宽度大于 1024px 时，主内容区和侧边栏将并排显示，主内容区占据2/3的宽度，侧边栏占据1/3的宽度。

在线咨询

上一篇：小程序，跳转页面的两种方式及其页面传参数
下一篇：golang html/template模块

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商