前言
最近完成了一个响应式布局的专题项目。在这里记录一下心得。
技术栈
项目中并没有使用Bootstrap框架，技术上采用 Jquery+媒体查询方式。之所以使用Jquery,是该项目中出现大量的动画效果，使用Jquery就非常方便实现效果了。
Jquery
先来说一下jQuery。之前在网上看到很多言论说jQuery过时了，不要再学习jQuery了。实际使用下来我觉得，该言论太过武断，或者说有些过了。确实它的设计理念与现在的mvvm理念比如vue框架相比过时了。可是在实际开发小项目中还是挺好用的。
而且veu框架的作者尤雨溪也说过，互联网是个非常庞大的体系，有些东西看似没什么人在用，那只是因为你没看见而已并不代表没有其它人用。
直至目前在npm查看jQuery一周都有超过6百万的下载量。说明仍然有不少项目正在使用jQuery。著名的响应式布局框架Bootstrap就还在使用jQuery。
学会并熟练使用jQuery并不会花费太多时间。不像vue框架需要掌握大量专门的语法，生命周期，以及它们背后的原理。jQuery就是一个js文件。
使用jQuery的心得
- Download jQuery | jQuery。下载jQuery，可以全屏复制打开的下载网页，黏贴到自己创建的js文件中。
- jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)这是一个中文的jQuery手册，页面布局干净，清爽，记述也很详细。
- 如果一下子想不起来语法或者不知道怎么实现功能。现在我们有chartGPT帮助我们，直接中文输入，反馈给我们代码。而且现在国产的文心一言也可以免费使用。
媒体查询
由于只给了两张设计稿，1920px与375px的，时间也比较紧张。所以媒体查询只分成了PC端 与 平板,手机共用的两种布局。据说最好从小的往大的写比较好。可是我先拿到的PC端设计稿，只能从大往小写。两者效果是一样的
// 手机与平板共用样式。几乎所有的移动端样式都是写在这里的
@media screen and (max-width: 1200px) {}
// 平板样式 极少样式写在这里。有部分样式需要从平板到手机的一个过渡效果
@media screen and (max-width: 1200px) and (min-width: 600px) {}
核心思想
如何布局从PC端到移动端有个响应式的效果呢！
在pc端页面上：
设计稿
首先1920设计稿中有多个板块，每个板块都有个宽1920px背景图片,中间1200px居中区域显示主体内容。
具体操作
那在所写的栏目上再包裹一层。那么外层的栏目宽度设置100%，背景图片使用background-image属性正好铺满全屏。内层主体宽度按照设计稿定住宽度(注意：设计稿是1200px,就写1200px)，margin居中，那么pc尺寸怎么变化。内容都是不变形，且居中的。
在移动端和平板上，即在1200px尺寸以内
设计稿
375的设计稿，大致相同的板块数量，只是在主体区域中布局有不同
具体操作
外层宽度100%，因为背景图片要铺满全屏。
内部主体宽度与外层宽度保持一定距离。有两种解决方案。
方案一：
外层加一个固定的padding-left,padding-right。因为平板和移动端的屏幕都比较小了，所以加一个固定padding 不会有太大影响。
方案二：
内层按照移动端设计稿计算一个百分比的宽度,那么在margin居中属性下也会居中。
未实现的构想
本来是想用rem的，实现在不同尺寸屏幕下，字体大小也有所变化。没有实现是因为，在PC端都是按照设计稿的要求固定大小的所以使用px单位，移动端可以使用rem，但是所有样式写在一个文件中，又有px单位，又有rem单位不好协调。看了一下Bootstrap官网，它里面使用到rem。仔细查看，发现没有定义html中font-size值。它是局部样式在PC端与移动端都使用rem，而且用了calc计算出来的。感觉实在复杂。
总结
- 在小型项目中使用jQuery实现交互效果，有中文文档，甚至让人工智能帮我们写
- 媒体查询分为PC端与移动端，以宽1200px作为移动端的布局
- 具体操作时需要用一个全屏的容器包裹主体内容。在PC端上，主体内容要按设计稿定住。因为PC端屏幕有些会非常宽，如果主体内容自适应，会向两边张裂，效果不好。在移动端主体给一个百分比宽度或者容器给左右padding，这是因为移动端屏幕小，就是要主体内容自适应，要撑开内容。当然有局部样式从平板过度到手机可以做一个微调。
