响应式开发

@Responsive
通常综合运用不同的布局方式进行开发；代码有冗余，影响性能
通常是桌面端会调整大小；手机端在打开的时候，就已经决定了如何使用资源，不会也没有办法去调整屏幕大小
单位 Unit
em

相对父级字体大小 font-size 而定

rem

根布局，相对 <html> 设置的字体大小 font-size 而定，默认是16px

%

百分比布局；相对父级宽度 width 而定

主流的栅格化布局框架都是基于百分比 %

vmin

代表 viewport（视口）宽度和高度中的较小值的 1%。换句话说，1vmin 等于当前视口宽度和高度两者之间的最小值的 1%

样式 Property
float

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

flex

弹性盒子布局；一维布局；应用非常广泛

grid

网格布局；二维布局；应用非常广泛

min-width
max-width
min-height
max-height
max-content

根据内容最大宽度自动调整自身宽度

值 Value

指定元素的宽或高

max-width

元素根据实际大小显示；如果是 block，不会铺满整行，但是仍然独占一行

方便块元素的水平居中

min-width

内容在不被截断的情况下，最小可能的宽度；会自动换行，保障完整的显示每一个单词

fit-width

根据所在容器调整大小

max-content: Lorem ipsum dolor sit amet.

min-content: Lorem ipsum dolor sit amet.

函数 Function
min
max
clamp
minmax
[] 响应式版心
超过800px时，保持800px；小于800px，为父级的90%，即：宽度为父级90%，但不超过800px
方案1：使用min()函数
main {
  width: min(800px, 90%);
  margin: 0 auto;
}
方案2：使用max-width
main {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}
脚本 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()
}
方案3：详情查看 BOM