【PWA】响应式开发

╰+哭是因爲堅強的太久メ 2022-06-03 08:46 283阅读 0赞

PWA 是专门应对手机开发而提出的概念，不过，由于手机端在国内四分五裂的局面看来（还包括 PC/Pad），屏幕尺寸的不同，网页设计的样式和大小当然也是完全不一样的。为了让 Web 能完美的在多端上运行，这里，我们就需要进行响应式开发。

响应式的目的就是让一个网站尽可能的适配所有大小的网页。当然，响应式开发所用到的技术也是非常之多，不过，主要的还是 CSS 。

## meta 标签 ##

meta 标签之所以重要，是因为它在手机端适配上起到的作用可以说是非凡的意义。meta 标签分很多种，比如：

meta 标签根据 name 的不同有着自己独特的任务，大部分是设计 SEO 的，我这里就不详谈了。meta 与响应式相关的 `name` 是 `viewport`。它是为了防止页面被浏览器/用户私自缩放而制定的。如何使用呢？很简单，在 `head` 标签中直接添加：

下图是设置了之后的效果：

![iphonescale.jpg-88.2kB][]

不过，上述 `viewport` meta 标签对 PC 是无效的，所以，在 PC 上无需担心。我先简单讲解一下 `viewport` 里面的基本属性：

*  width: viewport 的大小
 *  device-width: 当前设备屏幕的宽度
 *  height: viewport 的高度
 *  device-height: 当前设备屏幕的高度
 *  initial-scale: 当前页面的缩放比例。1.0 是不缩放
 *  maximum-scale: 当前页面的最大缩放比。
 *  user-scalable: 能让用户能够进行缩放页面（大部分情况是双击）。为了取消一些浏览器的 click 延迟，需要设置为 `no`。

## media query ##

MQ（media query）是在 CSS2.1 提出来的概念，在 CSS3 中得到增强。它主要是针对屏幕的相关参数的变化，做出相关的文件选取或者显示区别。具体用法为：

只有满足 MQ 要求的样式/CSS 才能被应用，不过，不管用不用 MQ，所有的 CSS StyleSheet 都会被下载。所以，这就比较尴尬。我们来先来看一下语法。 这是所有的语法值：

我们先来看一下基础属性。

### 基础属性 ###

首先，我们这里不会对所有的基础属性进行讲解，只会选常用的。基础属性需要对属性进行赋值，例如：

height:200px

#### width ####

定义设备的宽度。当然配套的就有：`max-width`，`min-width`。还有啥 `device-width`/`device-height` 这两个属性，它们已经从标准从废除了，一般都用 `width`/`height`进行替代。 最经常用到的就是 `min-width` 和 `max-width` 这两个属性。

*  min-width 表示 `>=` 该宽度值。`min-width: 200em`。
 *  max-width 表示 `<=` 该宽度值。`max-width: 200em`。

举个实在的例子，假如有一个元素要在 500px~800px 之内显示，其它范围内隐藏，使用 media query 就应该写为。

// 范围在 [500,800] 之内
    @media (max-width: 800px) and (min-width:500px) {
      .facet_sidebar {
        display: block;
      }
    }
    
    // 范围在 [500,800] 之外隐藏
    @media (max-width: 500px) , (min-width:800px) {
      .facet_sidebar {
        display: none;
      }
    }

#### height ####

定义设备的高度,不过这个不常用到。用法和 `width` 一样，只是它是用来定义高度的。

// 范围在 [500,800] 之内
    @media (max-height: 800px) and (min-height:500px) {
      .facet_sidebar {
        display: block;
      }
    }

#### device-ratio ####

该属性表示设备屏幕的宽高比，这主要是对完美主义设置的，不同屏幕的比例不一样，带来的视觉也会发生变化。注意，在赋值的时候，应该写为：宽/高。中间用 `/` 连接。例如，针对 3:7 和 1:1 的屏幕应用不同的 CSS：

// 3:7
    <link rel="stylesheet" type="text/css"
      media="device-ration: 3/7"
      href="3-to-7.css" />
      
    // 1:1
    <link rel="stylesheet" type="text/css"
      media="device-ration: 3:7"
      href="3-to-7.css" />

另外，还有两个配套的：`max-device-ratio` 和 `min-deivce-ratio`。用法和上面的一样，这里我就不多说了。

#### orientation ####

该属性是用来检测屏幕的翻转，即，横向和纵向。不过，它的取值有点怪。

*  landscape：横向模式。大家可以理解为一般风景的时候都是广角，能够将很大的美景收入眼中。
 *  portrait：纵向模式（也就正常模式）。本意是肖像画的意思，大家想想 `蒙娜丽莎的微笑`的画就 OK。

用法也简单：

@media (orientation: portrait) { ... }

#### resolution ####

该属性对于 retina 屏幕来说很有效，这支持两种单位，一个是 `dpi(dots per inch)` 和 `dppx(Dots Per Pixel)`。这里，我们需要对这两个单位做一些解释，首先是 dpi。

dpi 表示每单位英寸面积内有多少像素点（注意，是物理像素点）。一般来说，Web 是大于 72dpi 的。不过，该单位不常用到 Web 中，通常是针对打印机和照相机相关参数的描述（特别是打印机，主要是该单位）。

dppx 每个设备像素（即，CSS 中的 px 单位）中包含几个物理像素，该单位和 `dpr` 完全，只是不同的叫法。dpr 是 device-pixel-ratio，像素分辨率。它的计算公式为：

设备像素比 = 物理像素 / 设备独立像素

一般，retina 的 dppx 是 2。不过，iphone6 一下是 2，iphone6p 是 2.64，而 iphone 6 Plus 以上是 3（尴尬）。一般情况下，我们只要对 2 和 3 做相关处理即可。当然，他还有 `min-resulotion` 和 `max-resolution` 两个配套处理。

@media (min-resolution:2dppx){ ... }

### 逻辑处理 ###

在 MQ 中，逻辑处理和程序中的一样，有：`and`，`not`，`,`（表示或），`only`。例如：

@media (max-width: 800px) and (min-width:500px) {
      .facet_sidebar {
        display: block;
      }
    }

在 MQ 中，还有几个常量值，表示设备的类型，常用的有：`all`，`handheld`，`print`，`screen`等等。

*  all：所有设备适用
 *  handheld: 手提设备
 *  print：打印设备
 *  screen：屏幕设备

例如：

@media screen and (max-width: 800px) and (min-width:500px) {
      .facet_sidebar {
        display: block;
      }
    }

### 不同资源文件 ###

`media` 不仅可以用在 CSS 中，还可以直接运动到 link，用来筛选我们网站需要的资源，比如，根据 resolution 来进行区分：

或者横竖不同的样式：

## flex 布局 ##

弹性布局是在 2009 年提出的，这是区别于以往常规布局的一种新的布局方式。它是基于一维（x/y）方向进行布局。最新提出的 `grid` 二维布局，则是面向未来的大型网站的布局结构。这里，我们不贪多，先讲一下 flex 的一维布局方式。

### 基本术语 ###

首先声明一点，flex 布局，不仅仅是你使用 `display:flex` 就行。这是一个完整的概念，是由许多标签属性共同组成的。我们先来看一下它的基本术语：

![flexbox.png-11.5kB][]

其中，最为重要的是主轴（main axis） 和 辅轴（cross axis），容器（container） 和 子元素（items）的概念。我们一个一个来介绍一下：

*  main axis：主轴是 flex item 在设置尺寸大小，排列方式的参照物。是有 `flex-direction` 设置。
    
     *  main-start / main-end：主轴的开头/末尾
     *  main-size：主轴的尺寸大小
 *  cross axis：辅轴是垂直于主轴的方向。
    
     *  cross-start / cross-end：辅轴的开头/末尾
     *  cross-size：辅轴的大小
 *  container：是 flexbox 的容器元素。使用 `display:flex` 来进行命名。
 *  items：是容器的第一级子元素。两者的区别，可参照下图：

![image\_1b9q3kbmruuvimv7k01hpjckh9.png-10kB][image_1b9q3kbmruuvimv7k01hpjckh9.png-10kB]

在 flexbox 中，可以根据作用对象的不同，将属性分为父容器属性和元素属性。下面，我们就这两类来展开讲解。

### 容器属性 ###

定义一个容器很简单，直接使用 `display:flex` 进行修饰即可：

// inline-flex 是修饰行内不可分离的 flexbox 布局
    .container {
      display: flex; /* or inline-flex */
    }

#### flex-direction ####

该标签可以用来设置 主轴 的方向，通常有 4 种：

.container {
      flex-direction: row | row-reverse | column | column-reverse;
    }

*  row：从左到右（按照中国排版标准来定义）。默认值
 *  row-reverse：反向，从右到左排列。
 *  column：自上而下
 *  column-reverse：自下而上

具体排布可参照如图：

![image\_1b9q46ps0fhp19pcj931k2h0em.png-2.4kB][image_1b9q46ps0fhp19pcj931k2h0em.png-2.4kB]

#### flex-wrap ####

该标签定义是否可以进行换行。默认情况下，所有弹性盒子里的元素都会排列在一行里。它有 3 个属性值：

.container{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }

*  nowrap：不换行。超出的元素会根据剩余空间的大小来确定自身的大小。默认值
 *  wrap：可以换行，如果元素超出容器的尺寸，则可以排列到下一行中。
 *  wrap-reverse：反向换行，该属性和上一个的区别在于，多余的那一行将会替代原来的位置。差异如图：

![image\_1b9q4feem12pi1etd1vldhetrmv13.png-7.4kB][image_1b9q4feem12pi1etd1vldhetrmv13.png-7.4kB]

#### flex-flow ####

该标签没啥说的，就是 flex-direction 和 flex-wrap 的合并标签。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

#### justify-content ####

用来定义子元素在主轴上排列的方式。可用属性值有 5 个：

.container {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }

*  flex-start：items 紧贴着 container 的 `main-start` 排列。默认值
 *  flex-end：items 紧贴着 container 的 `main-end` 排列
 *  center：items 在 container 里，居中排布
 *  space-between：items 会带上空隙，在 container 中均匀排布，不过，首尾 item 紧贴边。
 *  space-around：每个 item 会均匀分配一些空隙，首尾只有一份空隙，其余有两份，因为，其余是两个 item 的和。具体差异如图：

![image\_1b9q4qtg0h7717k2kk11g7q1sqo1g.png-13.8kB][image_1b9q4qtg0h7717k2kk11g7q1sqo1g.png-13.8kB]

#### align-items ####

定义元素在辅轴上的排列。它的几个值和 `justify-content` 差不多：

.container {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }

*  flex-start： items 紧贴在辅轴的 `cross-start`。
 *  flex-end：items 紧贴在辅轴的 `cross-end`。
 *  center：items 在辅轴上，居中排列。
 *  baseline：items 根据内容的 baseline 对齐排列。
 *  stretch：items 充满整个辅轴。具体排布如下图：

![image\_1b9q5c3hclgjm0qocq1v9imlh1t.png-15kB][image_1b9q5c3hclgjm0qocq1v9imlh1t.png-15kB]

#### align-content ####

该标签是用来定义多行情况下，行元素整体的排布。（如果只是一行，就没必要了。）具体属性有：

.container {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }

*  flex-start：多行元素紧贴着 `main-start` 排布
 *  flex-end：多行元素紧贴着 `main-end` 排布
 *  center：多行元素在辅轴上，居中排布
 *  space-between：多行元素根据空隙，在辅轴上均匀排布，并且，首尾贴边
 *  space-around：每行元素两端会自动带上一份空隙，不过，首尾两端只有一份，其余有两份（是两行空隙之和）
 *  stretch：每行元素均匀充满整个主轴，默认值。具体排布见图：

![image\_1b9q5tcpd13oqqpu1veu1g62tod2a.png-17.3kB][image_1b9q5tcpd13oqqpu1veu1g62tod2a.png-17.3kB]

接下来，我们来看一下 items 相关的 flexbox 属性。

### items 属性 ###

在 items 设置相关的属性，是直接在子元素中设置，而不是在父容器中。只要是父容器下的第一级子元素都被称作为 items。接下来，我们就来看一下，与之相关的标签属性。

#### order ####

默认情况下 items 是 HTML 中的顺序来排布的，不过，你可以通过 `order` 标签来手动更改他们的顺序。数值越大，排列的位置约靠后

// 有 3 个元素。item_1 排第一个
    .item_1 {
      order: 2;
    }
    // 当设置 order 之后 item_1 变为最后一个

#### flex-grow ####

该标签从来设置子元素自身可以占据多大的空隙，接受的值只能为 >=0 的整数，默认为 0。例如：

.item_1 {
      flex-grow: 1;
    }
    .item_2 {
      flex-grow: 1;
    }

此时，会将空隙平均分为两份，item\_1 和 item\_2 各占一份。如果这样：

.item_1 {
      flex-grow: 1;
    }
    .item_2 {
      flex-grow: 2;
    }

那么，空隙一共会分为 3 分，item\_1 占 1 份，item\_2 占两份。

#### flex-shrink ####

该标签是用来定义，如果在行内时，有元素超出容器的宽度，那么其它元素会相应的自适应缩小。默认情况下，所有的子元素的 shrink 都为 1：

flex-shrink:1

如果你将 item\_1 设置为 2，则超出的部分会被多分 1 份到 item\_1 上进行缩小。

#### flex-basis ####

设置在没有空隙分配时的默认尺寸。如果有空隙出现，并且，你没有设置 `flex-grow`，那么默认是不会分配空隙到该元素的 `content` 中。如果你设置了 `flex-grow`，那么优先当其他元素已经达到使用 `width` 或者 `height` 设置的尺寸时，才会给其分配相应的空隙。 在弹性盒子中，`width` 和 `height` 有效性是在有多余空间，并且处于默认 item 样式（即，没 grow/shrink）时。大部分情况，如果你想设置固定大小的盒子，需要将 grow 和 shrink 设置为 0.

.fix-item{
        flex-basis:200px;
        flex-grow:0;
        flex-shrink:0;
    }

该标签有两个取值类型：

.item {
      flex-basis: <length> | auto; /* default auto */ }

`auto` 表示按默认情况来，即，遵循缩放，多余的空间会分配到 `content` 中去。

#### flex ####

该标签也是一个综合标签，flex-shrink 和 flex-basis 是可选的。

.item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

默认值为：

.item {
      flex: 0 1 auto;
    }

#### align-self ####

单独设置 item 在辅轴上分布的位置。取值和 `align-items` 一样。

.item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

例如：

![image\_1b9qt86ek1k6134v1eu4q6i14g62n.png-5.1kB][image_1b9qt86ek1k6134v1eu4q6i14g62n.png-5.1kB]

另外，float, clear 和 vertical-align 这几个标签，对 items 无效，这点需要牢记。

### 兼容 ###

flex 现在的兼容性已经很棒了，所有的主流平台都会兼容，不过，如果你还有针对 Android 4.3 以前的版本，则需要加上相关的 prefix。大致的 prefix，如下：

display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;

不过，最好还是采用编译的形式，有时候就不用自己手动加了。

## rem vh vw 响应式 ##

在响应式开发中，一般提倡使用的是灵活单位而非固定的 `px` 值。近年来比较好用的就是 `rem` 单位。另外，还有其他的单位，例如：`em`，`vh`，`vw` 等。这里，集中说明一下：

*  em：准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算（针对其他属性使用 `em` 单位）。例如：

.parent{
        font-size:20px;
    }
    .child{
        font-size:2em; // 40px
        padding:2em; // 80px
    }

*  vh/vw：这两个单位实际上是相当于 `viewport` 来定义的。vh 相当于 1% 的 `viewport`高度。vw 相当于 1% 的 `viewport` 宽度。这就可以让我们脱离父元素宽度的限制了。常常用于整块布局，而它的兼容性也挺好的，Android 4.4 都支持。
 *  vmin/vmax：这两个单位和上面的区别在于，它们不代表某个具体的宽高，而是代表大小，如果宽 > 高则，vmax = 1% 宽，vmin = 1% 高，反之依然。他们的兼容性和 vh/vw 一样，也是在 Android 4.4 以上可用。这两个属性看起来挺鸡肋的，不过实际上用处很多。例如，实现背景图的 `container` 和 `cover` 的效果。

// 实现 container
    .bg{
        width:100vmin;
        height:100vmin;
    }

如图：

![image\_1b9t3c1lp15ha132c16i61a7m16f89.png-21.7kB][image_1b9t3c1lp15ha132c16i61a7m16f89.png-21.7kB]

// 实现 cover 效果
    .bg{
        width: 100vmax;
        height: 100vmax;
    }

如图：

![image\_1b9t3d8kj1doo1hphii111iv1bmet.png-23.1kB][image_1b9t3d8kj1doo1hphii111iv1bmet.png-23.1kB]

*  rem：该单位是相对于根元素 `html` 的大小。该属性值用处比较大，常常用在 retina 兼容上。

// 根据根元素的 font-size 设置
    html{
        font-size:14px;
    }
    .some-node{
        font-size:2rem; // 28px
    }

在 retina 兼容屏上，常常会根据 dpr 的大小来手动调整根元素的 font-size，来对相关的屏幕进行兼容。

// iphone6 的基准值
    @media (min-width : 375px) and (max-width : 667px) and (resolution : 2dppx){
          html{font-size: 37.5px;}
    }
    
    //iphone5 的基准值
    @media (min-width : 320px) and (max-width : 568px) and (resolution : 2dppx){
          html{font-size: 32px;}
    }

大致的属性使用就是上面几类，大家有空的时候多多写一下，就能铭记于心了。

[iphonescale.jpg-88.2kB]: /images/20220603/af9d4e3e426e47a983384cd8d1a74ef2.png
[flexbox.png-11.5kB]: /images/20220603/3d93bd6128af42ce8c11216a419790fe.png
[image_1b9q3kbmruuvimv7k01hpjckh9.png-10kB]: /images/20220603/1af13e4bb7404bf8a5572280e58a2e64.png
[image_1b9q46ps0fhp19pcj931k2h0em.png-2.4kB]: /images/20220603/e75e6b4c55d141dfa31e6d2bfdff99e8.png
[image_1b9q4feem12pi1etd1vldhetrmv13.png-7.4kB]: /images/20220603/d4f7a9b0a6344e8da548ecb2c119357b.png
[image_1b9q4qtg0h7717k2kk11g7q1sqo1g.png-13.8kB]: /images/20220603/9695e447da204a7f815eff156ab9607d.png
[image_1b9q5c3hclgjm0qocq1v9imlh1t.png-15kB]: /images/20220603/c442b0cd799f48deb2ecc549b5cf2759.png
[image_1b9q5tcpd13oqqpu1veu1g62tod2a.png-17.3kB]: /images/20220603/60631b717f6a4403ba146a6f7d593df9.png
[image_1b9qt86ek1k6134v1eu4q6i14g62n.png-5.1kB]: /images/20220603/9571f00b773044d7a97b0277d3ba6eeb.png
[image_1b9t3c1lp15ha132c16i61a7m16f89.png-21.7kB]: /images/20220603/7b84be632aeb413daa6577a74df1edd3.png
[image_1b9t3d8kj1doo1hphii111iv1bmet.png-23.1kB]: /images/20220603/7303fd39236c4341a574c4f1afad3545.png