参考链接

响应式布局与自适应式布局有什么不同

移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)

MDN: 响应式设计

前端响应式布局原理与方案（详细版）

吃透移动端 H5 响应式布局 ｜深入原理到目前最佳实践方案

基于vw等viewport视区单位配合rem响应式排版和布局

移动端响应式布局方式

响应式与自适应式

  • 响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；
    自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

  • 自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。

  • 自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。

媒体查询

CSS3 媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

不管是移动优先还是PC优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是 min-width，PC端优先使用的是 max-width。

max 指的是不大于，例如 max-width:1200px = 不大于1200px的时候使用该规则中的样式

min 指的是不小于, 例如 min-width:1200px = 不小于1200px的时候使用规则中的样式

媒体查询需要根据众多的分辨率类型设置不同类型的断点。

百分比

看这里👉百分比

(无定位)子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height；

子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度；

(无定位)子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。

跟padding一样，margin也是如此，(无定位)子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width；

border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度，

除了border-radius外，还有比如translate、background-size等都是相对于自身的；

如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：

  • 计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

  • 可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。
    比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

rem

rem 单位都是相对于根元素 html 的 font-size 来决定大小的，根元素的 font-size 相当于提供了一个基准，当页面的 size 发生变化时，只需要改变 font-size 的值，那么以 rem 为固定单位的元素的大小也会发生响应的变化。

rem响应式的布局思想：

  • 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
  • 高度值可以设置固定值，设计稿有多大，我们就严格有多大
  • 所有设置的固定值都用 rem 做单位（首先在HTML总设置一个基准值：px 和 rem 的对应比例，然后在效果图上获取 px 值，布局的时候转化为 rem 值)
  • js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了

rem布局的缺点：

在响应式布局中，必须通过js来动态控制根元素 font-size 的大小，也就是说 css 样式和 js 代码有一定的耦合性，且必须将改变 font-size 的代码放在 css 样式之前

vw

1.只用 vw 单位

2.搭配 vw 和 rem

虽然采用vw适配后的页面效果很好，但是它是利用视口单位实现的布局，依赖视口大小而自动缩放，无论视口过大还是过小，它也随着时候过大或者过小，失去了最大最小宽度的限制，此时我们可以结合rem来实现布局

  • 给根元素大小设置随着视口变化而变化的vw单位，这样就可以实现动态改变其大小
  • 限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度

基于 rem 和 vw 和 calc 实践代码：

  1. html {
  2.     font-size: 16px;
  3. }
  5. @media screen and (min-width: 375px) {
  6.     html {
  7.         /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
  8.         font-size: calc(100% + 2 * (100vw - 375px) / 39);
  9.         font-size: calc(16px + 2 * (100vw - 375px) / 39);
  10.     }
  11. }
  12. @media screen and (min-width: 414px) {
  13.     html {
  14.         /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
  15.         font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
  16.         font-size: calc(18px + 4 * (100vw - 414px) / 586);
  17.     }
  18. }
  19. @media screen and (min-width: 600px) {
  20.     html {
  21.         /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
  22.         font-size: calc(125% + 4 * (100vw - 600px) / 400);
  23.         font-size: calc(20px + 4 * (100vw - 600px) / 400);
  24.     }
  25. }
  26. @media screen and (min-width: 1000px) {
  27.     html {
  28.         /* 1000px往后是每100像素0.5px增加 */
  29.         font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
  30.         font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
  31.     }
  32. }

补充

未来的响应式设计

文章：下一代响应式Web设计：组件驱动式Web设计

视频：【大咖开讲】阿里CSS专家大漠老师分享：Web终端适配主流方案

比如容器查询等，文章属实很长，只看了视频里的简单介绍。