2022年10月23日19:15:08

　　今天学院工作室竞选负责人，早上发的通知，看到了，没有多想，因为还在床上睡懒觉。想着等到起床再看，结果起床已经两点钟了。昨晚上搞我的博客，利用媒体查询完成了响应式布局，在PC端的显示效果尚可了，但在手机上只能算勉强可以看，还需要找到下一个方法，让手机端和PC端的使用不同的css文件，只使用绝对像素大小不能够实现这样的效果。昨晚实现响应式布局采用的是媒体查询的方式，当PC端的页面都适配完成了之后，发布网页，但是却发现在手机上的显示效果很奇怪，不知道为什么盒子不是在整个屏幕下布局的，元素无法对齐。如图所示：

思考了很久，仔细看了所有的css代码和html文件，才发现原来也是因为html布局中有的版心使用绝对像素的方法。

因为html是采用float布局的，然后有两个部分是布局在版心中的，版心和body部分的布局不同，所以产生了元素偏移的现象。

原本的版心样式是这样的：

1 .wrapper {
2     width: 1024px;
3     /* 版心居中 */
4     margin: 0 auto;
5 }

错误就是因为版心的宽度是固定的，所以其他部分经过了媒体查询缩小之后，版心内的内容并没有发生改变，因为没有改变版心的大小，发现了错误之后改成了这样：

1 .wrapper {
2     width: 100%;
3     /* 版心居中 */
4     margin: 0 auto;
5 }

这样就可以使版心内的内容无论屏幕的大小怎么变化都会适应屏幕的大小放缩。

其实可以利用这种百分比来进行全局布局，但是还没有实践过，再加上最近也没有闲暇的时间，所以缓缓吧。

之后的效果：

现在就正常了，只是显示效果不太好，字体太小了，在PC端倒是很好，不知道pc端应该怎么布局，应该是采用rem的形式，具体还没实践，希望尽快有时间能够来搞搞吧。

今天选这个主干，思考了一下还是决定不参与竞选，自己事情太多了，再多个事情真的遭不住。

以后好好专注于一件事情吧。

加油！