前端响应式的实现
前端响应式的实现
Flex布局
flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
一般会用到的属性：
- flex-direction:设置Flex容器中子元素的排列方向
- flex-wrap:设置Flex容器中子元素的换行方式
- flex-flow:设置Flex容器中子元素的排列方向和换行方式
- justify-content:设置Flex容器中子元素在主轴上的对齐方式
- align-items：用于设置Flex容器中子元素在交叉轴上的对齐方式。
- align-content：用于设置多行或多列的Flex容器中子元素在交叉轴上的对齐方式
百分比布局
比如，当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。
- height、width 属性的百分比依托于父标签的宽高。但是 padding、border、margin 等属性的情况又不一样
- 1、子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度，同样，子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位（默认定位的）父元素的宽度。 2、子元素的 padding 和 margin 如果设置百分比，不论是垂直方向或者是水平方向都相对于直接父亲元素的 width，而与父元素的 height 无关。
- border-radius 为百分比，则是相对于自身的宽度
缺点
计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
媒体查询布局
通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。
响应式缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。
另外有一个缺省值mediatype 有四种值：
- all：适用于所有设备(默认值)
- screen：屏幕（电脑、平板、手机等）
- print：打印机和打印预览
- speech：语音设备（屏幕阅读器等）
rem 布局
rem 如何适配
rem 是相对于 html 根元素的字体大小的单位。
我们通过修改 html 中 font-size 的字体大小来控制 rem 的大小。
当 html 中 font-size: 10px; 时，此时 1rem = 10px，所以 box 盒子的宽高分别为：100px 和 200px;
当我们把 html 中 font-size: 20px; 时，此时 1rem = 20px,此时 box 盒子的宽高就为 200px 和 400px;
实际开发中如何适配，如何将设计稿对应的 px 单位转换为 rem 单位
在实际的开发中，我们通常会以 750px 的移动端设计稿来开发。
我们在代码写完后，统一会把所有 px 单位全部转成 rem 来实现。
以上单位的转换，我们可以利用 vscode 的插件 px to rem 来自动实现。
把所有代码全部写完，然后一次性用 px to rem 插件转换成 rem 单位
接下来如何适配不同的浏览器，实现等比例的缩放呢 ？
- 比如现在有 5 个同尺寸的屏幕 （750 640 480 375 320），所有屏幕整体宽分成 10rem
- 那我们就需要分别得到这几种不同屏幕下对应的 html 根元素的 font-size 大小了。
vw、vh 响应式布局
vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度。
- 100vw = 视图窗宽度 ，100vh = 100 视图窗高度
- 如果移动端有 5 个不同的视口宽尺寸 750 ，640，480，375，320，则在不同尺寸下，对应的 1vw 的 px 值如下表
- 移动端尺寸1vw750px7.5px640px6.4px480px4.8px375px3.75px320px320px
- 我们在实际开发时，只需要按其中的某一个尺寸来的 px 单位的设计稿来开发就好（一般是以 750px 的大小为主）
- 代码全部开发好后，我们再利用 vscode 的插件 px to vw 来实现单位的自动转换。