不负众望，也是完成了四种设备的适配工作
网站字体是我设置的
MapleMonoNL-NF-CN-MediumItalic,没有其他可选，如果加载缓慢说明阿里云的esa缓存有问题或者正在加载字体（毕竟我放的是字体原件ttf格式的）
typora生成目录：
[TOC]
markdown语法目录（备用，怕发布后typora目录无法渲染出来）
目录
前言
本来，开始是没打算做适配的，但有些社区的小伙伴提到了，而且我也希望能够使用我的iPhone14pm访问。
于是第一次适配就是询问ai，按照我的14pm适配的。效果嘛，显而易见，只适合我的手机。
后面经过社区伙伴提醒，我意识到这件事情可以做，而且可以做的更好，媒体查询嘛
@media (min-width: xxxpx) and (max-width: xxxpx) {
/* 写样式，还要加 !important 这样才能应用上 */
}于是我花了两三天的时间自己去写了四种媒体查询
包括但不限于：
- 320px 以内 （一个小伙伴的设备是281宽，长1024，所以单独设置了一个。而且在浏览器模拟也专门设置了一个）
- 321px 到 374px （大部分的小屏手机，如：pixe4 苹果6/7/8plus等）
- 375px 到 480px （如我的14pm等稍微大一点或者正常尺寸的手机）
- 481px 到1024px （本来这个是分两个的，但是平板和宽屏设备展示效果其实差不多，就写成一个了）
320px以内举例
我总共写了六个文件的css，毕竟设备宽窄比较少见。
字体也都调小了，如：
h1 {
font-size: 24px !important;
}
h2 {
font-size: 20px !important;
}
h3,
h4 {
font-size: 18px !important;
}
/* 等等 */
p,
span,
li {
font-size: 14px !important;
}
/* 主要是屏幕小，字体不小的话影响美观，而且这个字体大小还是能看得清楚的。*/其它的样式，比如pc端的左侧导航链接，在移动端变成了顶部的固定导航链接。 这一步跟其他三个媒体查询写法一样，只是导航中的 gap：xxpx xxpx ；属性值不一样罢了 这也是我意识到gap用法多变，还有top、left、bottom、right等，都可以直接使用。
其中最让我感到意外的就是footer部分。
因为我的footer是跟导航链接和logo在同一个标签内，所以移动端适配时，对于footer部分就有一些特殊了，也是看了ai的代码才明白，position定位确实好玩。
另外在不依赖ai，自己去理解、去写css时，我先把flex又重新学了一遍，且整理好了。
这一次我是真的理解了。跟我完成astro的内容集合部分一样，第一次学习迷糊、第二次学习还是迷糊、第三次突然顿悟；似是之前学习没用心一般。
什么是flex，首先要明白html就是堆积木，我们把每个标签看作一个方块（大小可调），flex就是两条线，一个水平，一个垂直，去让这些方块按照两条线去排列。
效果展示
pc端
（就正常电脑上浏览器访问 1024px以上）
效果如下展示：
可以看到整体十分简洁，左边内容很全面，右边展示也不错。
最主要的一点，前面提到的，footer标签是跟nav标签在一个aside标签里的。不是通常的代码最下方写footer。
还有，我使用了position: fixed;这代表我将左侧导航栏（包括footer的备案信息）脱离文档流了，视高设置100vh直接将其锁死，再加上flex-direction: column;这个是把左侧logo、链接、footer对齐，看着比较舒服。这样右侧内容展示就很随意了，上下滑动不影响左侧的固定展示。
不过也为后面适配移动端埋下祸患，特别是footer
移动端
481px - 1024px（包括ipad-mini、air、pro等大于手机小于电脑的宽屏设备）
效果如下展示：
ipad mini
ipad air
ipad pro
可以看出，以上在ipad上的展示十分舒服，导航链接、正文内容、底部信息展示的很全面。
其中在导航链接和底部信息拆分样式时，我迷糊了两天。
其中导航链接不过是nav改变其flex即可，可是底部的footer难搞，后面我了解了一遍position和查看ai写的代码，瞬间明白了
/* 固定定位，参照物是浏览器窗口，所以设置视高100vh刚刚好 */
position: fixed;
/* 粘性定位 半脱离文档流，参照物是父级滚动容器；这种就是适合顶部导航栏的 */
position: sticky;
/*另外 top、bottom也可以直接跟着设置，决定顶部导航和底部导航是否一直显示在窗口*/
top: 0；
bottom: 0;这两个是最难思考的，当然如果你掌握了position绝对很简单。怪我之前学的这部分忘了。
回头再像flex一样学一遍position
其余的就像padding、margin这些可以自由设置，毕竟每个人审美不一样，有的喜欢窄的，有的喜欢宽的。
iPhone14 promax
范围是375px - 480px ；因为这段是专门为我的手机设置的，看着比较舒服，而且大部分手机也都适合这个范围，如：iphone se、iphone12 pro、iphone6/7/8plus等
这个不必多说，一开始就是按照ai教我的代码写的（复制），后面自己仔细分析发现媒体查询就那么一回事，自己给原来ai的代码删掉重新写了一遍，调着写。
效果展示如下：
不过多解释，这个跟ipad样式编写有异曲同工之妙
Pixel 4
范围是321px - 374px；这个是适配小屏手机的，其实这类设备应该很少了。
效果展示如下：
看吧展示都挺好
MK
范围是320px以内 这个设备是我自定义编辑的，一个小伙伴的设备显示规格是 281px+1024px。
效果展示：
讲真的，有没有觉得这个设备像《爱情公寓》中，关谷神奇的儿子那一集，他儿子展示的‘苹果18’ ψ(｀∇´)ψ，反正就是长。
结语
整体而言，大部分设配我都适配了，访问也几乎没有延迟（当然说的是中国大陆），还有一些不一样的代码，我没展示，大部分是关于字体大小的设置，比如h1 - h6、p、span等。
如果字体不知道如何适配，其实可以在浏览器中检查选择设备，一点一点调整字体大小（我就是这样的），反正咱是业余的，结果能看就行，你说是吧。
css的学习任重而道远，不要过度依赖ai，除非你对这些知识很熟悉。