import { Image } from 'next/image'
Tailwind 的营销活动 H5 自适应布局
自适应布局 & 响应式布局
这样区分响应式布局和自适应布局，只代表个人理解
自适应布局
- 根据屏幕大小自动伸缩
- 使用 rem 或者 vw 单位
- 适用于营销活动页面，适配移动端 H5，Hybird，PC端是看到的移动端页面
响应式布局：
- 根据屏幕大小自动调整布局
- 使用媒体查询，单位基本只需要使用 px
- 使用flex,grid,百分比布局
- 需要特别注意的是 tailwind 中需要移动端优先
自适应布局实现
自适应布局会随着屏幕大小自动伸缩，所以需要使用 rem 或者 vw 单位，rem 是相对于根元素的 font-size，vw 是相对于视口的宽度
在 tailwind 中使用 vw 的话，相对于 rem 没有那么方便，因为 tailwind 中字体是 rem 单位，
圆角使用原始 px（避免变形）
这两个例子可以直接在 codesandbox 中运行
vw 实现，因为 codesandbox 中暂没找到方案实时编译 tailwind，所以直接加了css
vw 的值是 1000 尺寸设计稿的值 / 10，sm断点的值是前面的值*6.4或者谷歌控制台选到 640 尺寸的时候直接取值，不考虑pc的情况下这样是挺好的，用 vw 如果想要限制在 pc 上看到的大小，往往需要写两套，也就是正常写一套 vw 然后媒体查询还要写一套
原理是：设计稿1000 / 屏幕宽度100vw = 设计稿点出来的数值 / 写到屏幕的数值，求出写到屏幕的数值 = 设计稿点出来的数值 / 10
rem 实现（推荐）
rem 的原理也同上，但是需要设置根元素的 font-size，然后使用 rem 单位，这样就可以根据根元素的 font-size 来计算出 rem 的值，注意设计稿宽度不同，计算出来的数值也不同
需要特别注意的是这样设置了后，由于根元素的 rem 单位变了，使用 top-4 这类的tailwind 类就不准确了
原理是：写到屏幕的数值 = 设计稿点出来的数值 × (100vw / 1000px) = 设计稿点出来的数值 × 0.1vw
设置根字体大小为 0.1vw，最大值为 0.64px，最小值为 0.32px，这样在 320px 的时候，根字体大小为 0.32px，在 640px 的时候，根字体大小为 0.64px，这样可以直接使用设计稿点出来的数值，比较方便