响应式布局是一种网页设计方法，旨在使网页能够在不同的设备和屏幕尺寸下提供最佳的用户体验。这意味着网页的布局和元素会根据用户所使用的设备的屏幕尺寸和分辨率进行调整和重新排列，以确保内容在各种设备上都能够清晰可见、易于浏览和交互。

我的github个人主页主要用了几个响应式布局的方式，一个是通过Bootstrap框架实现的，通过Bootstrap的栅格系统，可以很方便的实现响应式布局。比如用class="col-md-2 col-lg-2 hidden-xs hidden-sm"来实现某一栏在不同屏幕尺寸下的显示宽度和隐藏等。

另一个是通过媒体查询实现的，通过CSS3的媒体查询，可以根据不同的设备和屏幕尺寸设置不同的样式。比如通过@media screen and (max-width: 768px)来设置在屏幕宽度小于768px时的样式。如果是想要电脑端优先，就设置max-width，如果是移动端优先，就设置min-width。screen表示媒体类型是屏幕，如果不加这个，那么在其他媒体比如打印机上也会生效。

还有就是通过一些css布局来实现，比如flex布局，grid布局等。视口单位vw和vh也是很好的实现响应式布局的方式，比如设置width: 90vw，表示元素的宽度为视口宽度的90%。

rem和em也是很好的实现响应式布局的方式，rem是相对于根元素的字体大小，也就是html元素的字体大小，而em是相对于父元素的字体大小。其设计思想则是不直接给元素设置具体的尺寸，而是根据字体大小来设置元素的尺寸，好处是可以方便的控制整体上各元素的尺寸，可以结合媒体查询或者js来动态的改变根元素的字体大小，从而实现响应式布局。

除了在技术层面上的实现，响应式布局还需要考虑到用户体验和设计的角度。比如在移动设备上，由于屏幕尺寸较小，需要考虑到内容的可读性和可操作性，以及导航和交互的方式等。所以我在做自己个人博客的时候，也会考虑到这些因素，比如header的导航菜单在电脑上是横向排列，在移动设备上则是点击菜单按钮后弹出的垂直菜单；比如文章页面在宽屏上是三栏布局，方便显示目录等信息，而在移动端则只显示一栏，方便阅读。