响应式开发 Responsive

目标 Objective

Lorem ipsum dolor sit amet.
Perspiciatis, dolores numquam. Voluptas, earum.
Repellendus quae quasi obcaecati blanditiis!
Atque iste amet voluptatibus numquam!
Laborum sed tempore voluptatum adipisci!

内容 Content

Lorem ipsum dolor sit.
Aperiam beatae odit consectetur?
Consectetur amet repellat error?
Cum, delectus deserunt? Magni.
Atque illum reiciendis ut.

回顾 Review

Lorem ipsum dolor sit amet.
Quibusdam veritatis repellat magni possimus.
Consectetur non impedit eos rerum.
Ratione ea nihil blanditiis vitae?
Quibusdam, dolorum aliquam. Facere, sequi.

引言 Introduction

. 通常综合运用不同的布局方式进行开发；代码有冗余，影响性能

. 通常是桌面端会调整大小；手机端在打开的时候，就已经决定了如何使用资源，不会也没有办法去调整屏幕大小

属性 Property

max-width

最大宽度
适配超大屏，如 4K 屏幕

.container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 1rem;
}

max-content
- 块元素默认占满 - 100%
- 根据内容最大宽度自动调整自身宽度
min-width
max-height
min-height
min-width
fit-width

. 根据所在容器调整大小

max-content: Lorem ipsum dolor sit amet.

min-content: Lorem ipsum dolor sit amet.

float
- 浮动布局
- 早期多使用，现在仅在特定场合才使用，如图文混排、首字下沉等
```
float: left;
```

值 Value

flex
- 弹性盒子布局
- 一维布局
- 应用非常广泛
```
display: flex;
```
grid
- 网格布局
- 二维布局
- 应用非常广泛
```
display: grid;
```

单位 Unit

相对单位 em
- 相对最近的字体大小 font-size 而定，即：如果你设置了字体大小，那么就参照你；否则参照父级；否则依次往上找
- 主要应用于首行缩进等特殊场合
```
text-indent: 2em;
```
绝对单位 rem
- 相对根节点 <html> 设置的字体大小 font-size 而定
- <html> 字体默认大小是 16px
- 换算方便起见，通常设置大小为62.5%；1rem = 10px
```
html{
  font-size: 62.5%;
}
```
相对单位 %
- 百分比；相对父级宽度 width 而定
- 主流的栅格化布局框架都是基于百分比 %
视口单位 viewport
- vw：视口宽度 viewport width；100份
- vh：视口高度 viewport height；100份
- vmin*：视口宽度和高度中的较小值的 1%。换句话说，1vmin 等于当前视口宽度和高度两者之间的最小值的 1%
fr
- fraction | 份数
- 多用于网格布局 grid；子项相对于容器的份数
flex
- 子项在容器中的比例；多用于弹性盒子布局 flex
- 前端UI框架中多采用12份、24份进行布局

函数 Function

min
max
minmax
clamp

[] 响应式版心

. 超过800px时，保持800px；小于800px，为父级的90%，即：宽度为父级90%，但不超过800px

方案1：使用 min() 函数

.container {
  width: min(800px, 90%);
  margin: 0 auto;
}

方案2：使用 max-width

.container {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

媒体查询 @media

断点参考 breakpoint
item	desc
sm	40rem(640px)
md	48rem(768px)
lg	64rem(1024px)
xl	80rem(1280px)
2xl	96rem(1536px)

[] 响应式rem

@media screen and (max-width:768px) {
  html {
    font-size: 50%;
  }
}

脚本 JavaScript

. 使用万能的JavaScript

[] 设置字体大小

方案1：静态设置 - 为方便计算，通常设置html字体大小为62.5%：1rem=10px

html {
    //font-size: 10px;
    font-size: 62.5%;
    scroll-behavior: smooth;
}

方案2：动态设置 - 根据视口宽度设置字体大小

超过750，按750计算；小于320，按320计算

放在脚本放在<header>，优先处理

function rem() {
  let dw = document.documentElement.clientWidth || window.innerWidth
  if (dw >= 750) {
    dw = 750
  }
  if (dw <= 320) {
    dw = 320
  }
  console.log('dw', dw);
  // 1rem=100px
  document.documentElement.style.fontSize = (dw / 7.5) + 'px'
}

rem()

window.onresize = function () {
  rem()
}

响应式开发

目标 Objective

内容 Content

回顾 Review

引言 Introduction

属性 Property

值 Value

单位 Unit

函数 Function

媒体查询 @media

脚本 JavaScript

初始化 Initialization

练习 Drill

小结 Summary

作业 Homework

参考 Reference