CSS响应式布局

📖参考笔记：什么是响应式布局？响应式布局有几种方法？

面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？

🏟️含义

响应式布局：是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕，简单来说就是屏幕有大有小，自适应。

🏛️原理

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

属性对应如下：

• width=device-width: 是自适应手机屏幕的尺寸宽度
• maximum-scale:是缩放比例的最大值
• inital-scale:是缩放的初始化
• user-scalable:是用户的可以缩放的操作

🏗️实现方式

🏀媒体查询

使用@media查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片、字体大小等等。

在实际开发中，会将屏幕划分成几个区间，例如：

/* ============媒体查询============== */
@media (max-width: 1200px) {
  .container {
    flex-direction: column;
    padding: 10px;
  }
  .container .profile {
    /* 恢复之前的定位 */
    position: static;

    /* 居中 */
    align-self: center;
    /* 由于改变了轴向，需要根据内容去调整宽度 */
    flex: auto;

    margin-bottom: 20px;

    border-right: none;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
  }
  .container .info {
    padding: 20px;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
  }
}

@media (max-width: 600px) {
  .container .profile {
    width: 100%;
  }
  .container .profile .contact-btn {
    width: 100%;
  }
  .info .introduce p {
    font-size: 12px;
  }
  .container .info .experience p {
    font-size: 12px;
  }
}

🏀rem布局

rem 相对长度单位，相对于根元素的 font-size 值，页面中的根元素只有一个（即 html 标签），标准统一，可用于响应式布局。

💕项目用的rem最简单的方法一般都是多写一个绝对单位声明💕

🏀flex布局

flex 布局在响应式方面，主要是实现元素宽高的自适应，无法实现其他属性，如字体大小的自适应。

🏀vw 和 vh

vw ，就是相对于视口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为相对于视口的高度。

🏀百分比布局

百分比是相对于包含块的计量单位，通过对属性设置百分比来适应不同的屏幕。

🏦推荐方案

两种方案

1. 相对根元素响应 = 媒体查询 + rem

   使用媒体查询，随屏幕宽度的变化，调整根元素的 font-size，使用单位 rem

2. 相对视口响应 = vh + vw

   随客户端设备宽高的变化，页面自动适配调整变化，呈现预期的页面效果。

🏞补充

🏝网页视口尺寸

667是屏幕高度，553是网页视口高度