什么是响应式Web 设计

早年设计 Web 时，页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕，那么结果从多余的滚动条，到过长的行和没有被合理利用的空间，不一而足。随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（responsive web design，RWD），RWD 指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。

在考虑好同一个网页在不同尺寸屏幕的布局呈现方式后，然后进行编码实现这些呈现方式，即让网站的网页效果（布局效果）能够在不同屏幕大小，如电脑、平板、移动设备上都有清楚且接近的显示效果，而不至于为每个设备屏幕情况都要写一个页面或网站。这整个过程就是响应式web设计。

最初，响应式设计是从“桌面”、固定宽度设计开始的。然后，到了小屏幕上，内容会重排，或者根据情况隐藏部分内容。可是，随着时间推移，人们发现，还是采用相反的设计思路更好，即先为小屏幕设计内容、样式，然后再向大屏幕扩展。

媒体查询

CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用。

换种说法，媒体查询确实具有在CSS中实现条件逻辑的能力。使用媒体查询，其中的样式只在某些条件具备的情况下才会被应用。

比如，可以根据视口宽度、屏幕宽高比和朝向（水平还是垂直）等，只用几行CSS代码就改变内容的显示方式。

可以将其想象为对浏览器的询问。如果浏览器回答“是”，那么就会应用对应的样式表。如果浏览器回答“否”，就不会应用。

媒体：指传播信息的工具，如报刊、广播、电视等。

媒体查询得到了广泛实现。除了古老的IE（8及以下版本），几乎所有浏览器都支持它。

媒体查询的语法

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

mediatype 的可选值：

media feature 即媒体功能特征，在响应式设计中，媒体查询中用得最多的特性是视口宽度（width）。

下面是部分特性，完整的请查阅相关文档：CSS3 @media查询 | 菜鸟教程 (runoob.com)

• width：视口宽度。
• height：视口高度。
• orientation：设备方向是水平还是垂直。
• resolution：屏幕或打印分辨率，比如min-resolution: 300dpi。也可以接受每厘米多少点，比如min-resolution: 118dpcm。
• ……

1、在CSS中使用

body {
    background-color: grey;
}
@media screen and (min-width: 320px) {
  body {
    background-color: green;
  }
}
@media screen and (min-width: 550px) {
  body {
    background-color: yellow;
  }
}

注意，查询默认 all and, 除非你真的想针对特定的媒体类型应用样式，否则就不要写screen and了。

直接：

@media (min-width: 550px) {
  body {
    background-color: yellow;
  }
}

2、在link标签中使用

<link rel="stylesheet" type="text/css"
  href="stylesheets/mobile.css" media="only screen and (max-device-width: 480px)">

3、将多个媒体查询穿在一起

<link rel="stylesheet" media="screen and (orientation: portrait) and
(min-width: 800px), projection" href="800wide-portrait-screen.css" />

css中，长度可以用px、em、rem。假设你想在800像素处设置断点，但又想用em单位，可以用800除以16，就是50em。

4、CSS文件中，@import与媒体查询

可以在使用@import导入CSS时使用媒体查询，有条件地向当前样式表中加载其他样式表。比如以下代码会导入样式表phone.css，但条件是必须是屏幕设备，而且视口不超过360像素：

@import url("phone.css") screen and (max-width:360px);

记住，CSS中使用@import会增加HTTP请求（进而影响加载速度），因此请慎用。

如果浏览器要加载的响应式页面通过不同的媒体查询链接了4个不同的样式表（分别为不同视口的设备应用样式），那它就会下载4个CSS文件，但在渲染页面之前，它只会解析那个针对当前视口大小的样式表。

媒体查询代码不建议单独写个文件

除非在极端情况下，否则我都建议在既有的样式表中写媒体查询，跟常规的规则写在一起。即对某块元素，如果不同尺寸的样式不同，那么这几个对同一元素的样式处理会先后连在一起写，而不会在某个媒体查询里集中写多个选择器的样式。前者虽然看着有些繁琐，重复，但是容易维护，且压缩后代码大小变化并不大。

视口（viewport）和 <meta> 标签

浏览器中用于呈现网页的区域叫视口（viewport）。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。

为了利用媒体查询，应该让小屏幕以其原生大小来显示网页，而不是先在980像素宽的窗口中渲染好，让用户去放大或缩小。2007年，苹果在发布iPhone的时候，就引入了一个针对视口的meta标签。目前安卓机和其他手机基本都支持这个标签了。这个用于视口的meta标签，是网页与移动浏览器的接口。网页通过这个标签告诉移动浏览器，它希望浏览器如何渲染当前页面。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

• width=device-width告诉浏览器页面的宽度等于设备的宽度，
• user-scalable=no完全禁止用户缩放，
• initial-scale=1.0表示按页面内容实际大小显示。

下面再在看几个示例：

<meta name="viewport" content="width=device-width">

上面这个<meta>标签想表达的意思是：按照设备的宽度（device-width）来渲染网页内容。

下面的例子允许用户最大将页面放大到设备宽度的三倍，最小可以将页面缩小至设备宽度的一半。

<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5" />

甚至可以完全禁止用户缩放。虽然允许缩放是一个重要的无障碍特性，但现实当中很少有必要这么做：

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

大多数情况下，都可以使用这个meta标签：

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

基本上所有浏览器默认的文本大小都是16像素，因此用像素值除以16就可以得到rem值。

为了更好的理解viewport，推荐这篇文章：viewport 深入理解 | 菜鸟教程 (runoob.com)

我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

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

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

移动端浏览器默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport。这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。

如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于设备的屏幕宽度的。

flex布局

1、 某块元素不要用固定宽度了，用固定百分比，即块的宽度除以父级元素宽度
2、 Flexbox有4个关键特性：方向、对齐、次序和弹性。
3、关于Flexbox的对齐，最重要的是理解坐标轴。有两个轴，“主轴”和“交叉轴”。

重要：学习flex一定先认真看下这篇教程：https://www.runoob.com/w3cnote/flex-grammar.html

容器、主轴，交叉轴

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

关于Flexbox的对齐，最重要的是理解坐标轴。有两个轴，“主轴”和“交叉轴”。这两个轴代表什么取决于容器的flex-direction属性。比如设置为row（默认），则主轴就是横轴，而交叉轴就是纵轴。

反之，如果是column，则主轴就是纵轴，而交叉轴为横轴。下图展示了方向为row时的情况：

以下6个属性设置在容器上。

• flex-direction：用于设置主轴的方向。它可能有4个值。

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

• flex-wrap：定义了如果一条轴线排不下，如何换行。
  值为：nowrap | wrap | wrap-reverse之一

• flex-flow ：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

• justify-content：定义了项目在主轴上的对齐方式。

• align-items：定义项目在交叉轴上如何对齐。

• align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。？？？

主轴的对齐

控制沿Flexbox主轴对齐的属性是justify-content，该属性应用在容器上，它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

交叉轴的对齐

控制交叉轴对齐的属性是align-items，该属性应用在容器上，它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

给伸缩项（flex item）定义宽度

除了width，还可以通过flex属性来定义宽度，该属性用在容器内的元素上。

这里的flex实际上是三个属性合体的简写：flex-grow、flex-shrink和flex-basis。默认值为0 1 auto。后两个属性可选。另外，flex属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如：flex: 0 0 50px的意思是，这个伸缩项既不伸也不缩，基准为50像素（即无论是否存在自由空间，都是50像素）。

可以把flex属性想象成设置比例。如果每一项都设置为1，则它们会占用相等的空间：

align-self 属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

在确定哪些平台和浏览器版本支持什么CSS特性时，建议参考这个网站：http://caniuse.com

更新于：2023-4-1

本栏目推荐文章
• 特朗普开始在YouTube上打竞选广告了 —— 美国总统的竞选广告已经开始媒体投放了
• 拜登开始在YouTube上打竞选广告了 —— 美国总统的竞选广告已经开始媒体投放了
• pom.xml一些标签
• 06-从媒体融合发展说开去
• 移动端最新布局处理
• mybatis的foreach标签初使用
• 中文语言标签
• k8s集群Node节点管理：节点信息查看及节点label标签管理
• 一文了解Vprix容器流媒体平台和传统云桌面的区别、优劣势
• 202401102331 -《Flex9格布局——从1到9》

布局 viewport 标签 媒体 meta布局viewport标签 媒体 标签meta 常用 标签meta 标签 前端 知识meta meta-data作用 标签data 作用 标签meta 属性 标签meta 容器 布局 元素 多媒体 标签 媒体09 社交 效果 标签 媒体