响应式布局思考

在我首次接触“响应式布局”这个词时，充满了疑惑：

1. 怎么实现？
2. 需要什么基础
3. 需要解决的难点是什么

等等······

最近复习写下这篇笔记，一些知识点参照https://www.freecodecamp.org/news/how-to-start-thinking-responsively/

具备条件

1. 思考如何响应式布局；做之前最好考虑清楚要怎么布局
2. 基础知识：CSS单位、Flexbox基础、媒体查询基础

一、css单位

构建响应式网页设计的第一个也是最基本的概念是用于设置许多属性的单元。

有3种主要的CSS单位类型：绝对单位，百分比单位和相对单位。

1、绝对单位

绝对单位也称为固定单位。

以任何绝对单位表示的长度将以完全相同的大小出现（因此，为什么我们称它们为固定大小，所以它们是固定大小）。

虽然px（像素），是最常见的单位，在CSS中我们也可以使用pt，pc，in，cm，mm，和更多的人，虽然我不会真的建议那些除非你造型的东西打印。

px比您想象的要复杂一些。过去，a px与屏幕上的像素有关，但是现在CSS使用称为参考像素的东西，使它固定大小，与设备分辨率无关。

2、百分比

百分率通常用于定义相对于其父项大小的大小。

这与绝对单位略有不同，并且需要一些时间来适应。当我们使用设置宽度时px，我们告诉该元素应该有多大；
随着分辨率改变宽高相应地改变

//假如box父容器为800px，那么box是800*0.8 px
.box {
    width: 80%;
    /* this element will have a width of 80% */
}

3、相对单位

CSS中的相对单位总是相对于其他内容的大小。一些单位将查看font-size另一个元素（或该元素）的，而另一些单位将查看视口的大小。

介绍font-size与em和rem有关的两个

1. em: 声明font-size元素的时，如果使用em，则它相对于父元素的font-size
2. rem: 总是font-size与html元素的相对，而没有其他任何东西，这使它的使用更加容易

因为使用em会产生级联效果，所以建议使用两者遵循以下规则：

font-size:rem
margin and padding: em; //当元素margin和padding使用em，它都是相对于该元素的font-size
width: em or % //百分比

二、弹性盒

一旦确定了单元及其最适合的单元，我便转向了解flexbox的基础知识，这使我们可以非常轻松地创建响应式布局，而不必依赖浮动或定位。

默认情况下，所有元素都具有或display属性。blockinline

块元素 （div，header，footer，h1- >h6，p等等）在彼此顶部堆叠。

内联元素 （a，strong，em，span，等），什么是他们周围的气流内逗留。

当我们将其显示更改为可弯曲时，它们开始并排对齐。

flex的更多属性知识点https://www.runoob.com/css3/css3-flexbox.html
阮一峰的flex教程：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

块元素垂直居中问题采用 flex 解决

行内元素垂直居中问题解决如下：

1）单行

该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。

2）多行

设置该元素 css 属性：display: table-cell; vertical-align: middle;，还需设置该元素的父级元素 css 属性：display: table;

三、媒体查询@media

媒体查询使我们可以声明仅适用于特定情况的新CSS规则，例如不同类型的媒体（屏幕，打印，语音）以及具有不同的媒体功能（例如屏幕宽度，方向，长宽比等）的CSS规则。

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

@media media-type and (media-features) {...}

更多媒体查询知识点：https://www.runoob.com/css3/css3-mediaqueries.html

四、响应式布局断点分辨率

PC端一般分为980，1024，1280，1360，1440，1920即可，
移动端一般分为768，750，640，480，360，320即可移动端

五、图片自适应

参考：http://caibaojian.com/3-solutions-for-responsive-image.html
个人觉得好麻烦，多图片的话还要考虑性能问题。

在当前响应式设计和自适应设计的流行下，很多web 应用往往都兼容手机、平板和PC，其中一个让人比较头痛的问题就是图片的加载了。不同平台显然不可能用同一张大的图片，这样子不但浪费手机流量、影响网站载入速度并且在小屏幕下会很不清晰。让浏览器根据分辨率自动识别图片是最好的方法。

响应式图片和多媒体是响应式网站的三大基础重点之一。表面上看这是一件非常简单的事情，只要把图片元素的高、宽属性值都移去，然后设置max-width属性为100%即可。不过在这么做之前还需要考虑很多情况：

1. 设置max-width属性使得图片能够自适应。不过这么做的前提是你必须要创建一幅尽可能高分辨率的图片（这是一种浪费行为）。最好的解决方法则是使用大图的一部分或者干脆完全用不同尺寸的图片
2. Apple 设备的retina技术显示图片要求更多的图片，考虑到其他设备也会跟随Apple的高分辨率显示技术（不过可能显示的像素尺寸不同）。我们若将所有不同尺寸的图片都预加载进来，此乃饮鸩止渴之举，万不可取——毕竟我们的目标只是是减少带宽而非增加

解决方法

创建一个新的（HTML）元素

picture标签：该方法已经在使用了，不过在使用方式上存在一些争议。这些争议主要来自两方面：业界的web开发者和浏览器制造者。web开发者提议创建一个新的picture元素（类似HMTL5中的video这样的元素），该元素中包含其他的图片源，示例代码如下

<picture alt="image description">
  <source src="/path/to/medium-image.png" media="(min-width: 600px)">
  <source src="/path/to/large-image.png" media="(min-width: 800px)">
  <img src="/path/to/mobile-image.png" alt="image description">
</picture>

srcset属性 | 兼容性比较好：浏览器开发者则是通过给img元素标签增加srcset属性来解决此问题的，功能一样，然而直觉上不好理解：

<img src="path-to-default-image.jpg" alt=""
  srcset="path-to-default-image.jpg 600w 200h 1x,
                   path-to-another-image.jpg 600w 200h 2x,
                   path-to-a-third-image.jpg 200w 200h">

解析
1、path-to-another-image.jpg 是不言自明的，当符合下述条件时就使用该 图片
2、依据media queries要求，设备最小尺寸为600w和200h
3、浏览器有以2x像素密度显示的能力

因此这里所表达的意思是，当浏览器能够处理2x像素图片，且设备至少是600px宽、200px高的情况下，使用此图片源显示。此种解决方法从浏览器开发者角度看是非常合适的，毕竟能够让浏览器自己通过算法获取设备的兼容性和像素密度

六、库

使用一些库的栅格布局可以达到蛮好的响应式布局，举几个例子，具体看相应的文档：

• bootstrap
• element
• layui

等等·····