这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
响应式布局
媒体查询+vw/rem
实现相适应式布局的思路其实还是比较简单的，总的就是使用@media媒体查询对不同宽度下的不同组件样式进行重写即可；
媒体查询只是在一个范围内使用一种布局方法，比如：@media screen and （max-width：1190px）{}就只是设置了宽度小于1190时的样式，默认样式则为大于1190的了。
这使得我们对煮面进行大致划分是很有帮助的，的是在一些情况下并不是那么完美，又比如我们要设置在不同设备下字体大小会有细微变化，这时媒体查询就很难办到。
所以我们还需要配合vw或vh又或者rem来操作，上面三个都是css中的单位，使用就和px一样，我们只用把样式从font-size:20px;改为font-size:2w;就可以让这个字体大小会在不同屏幕下有变化。
简单说明下vw原理，对于px，在所有地方1px长度就是那么长，他不会随我们的设备发生改变，但是vw是相对于我们的设备来说的，1vw就是我们设备显示区域宽度的1%，我们的显示器宽度是1920px，那么1vw=19.2px；显示器宽度变成750px，那么1vw就是7.5px，请注意：vw是随着我们设备宽度的改变实时变化的。
vh原理一样，1vh就是我们设备显示区域高度的1%；
并不推荐即使用vw又使用vh
rem呢类似吧，rem需要手动设置一下html字体大小，并且它也不会实时变化，我不采用它，也就不深入讲解。
亮暗两色主题切换
类名切换+css变量
我直接讲解在next.js中的使用方法了，在next.js的styles目录下会有一个global.css的全局样式文件，我们只需要在其中定义两个类选择器.light 和 .dark就好。
在这两个选择器中我们定义出我们需要改变的一些样式变量
.light{--background-color:#fff;}
.dark{--background-color:#333;}
然后我们在pages目录下_app.tsx/_app.jsx文件中，在Component外嵌套一个div标签，然后给这个标签动态设置类名（dark或light）就可以了。
最后我们在需要使用的地方使用就行了。 比如：
body{background-color:var(--background-color)}
--background-color只是一个变量名字，并不是说它只能在background-color里使用，只用有需要颜色色，我们都可以使用
这就是我觉得实现他们的比较简单的方法了，可能写起样式来比较费劲，不知道还有什么更好的方法。。。
