Question

当前响应式布局的原理是通过什么实现的，bootstrap中，手机，平板，pc电脑与大屏电

Answer 1

是通过栅格系统和媒体查询实现的

// 小屏幕（平板，大于等于 768px）
@media (min-width: @screen-sm-min) { ... }

// 中等屏幕（桌面显示器，大于等于 992px）
@media (min-width: @screen-md-min) { ... }

// 大屏幕（大桌面显示器，大于等于 1200px）
@media (min-width: @screen-lg-min) { ... }

// 适用于栅格的流式布局
<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

详见中文官网：http://v3.bootcss.com/css/#grid

Answer 2

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，随着现在各种终端的快速发展，做出一些能够适应不同分辨率、不同平台、不同屏幕大小的网页尤为重要，这不仅使得自己的网站适应不同终端的能力更强，同时也为用户带来了良好的体验。而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。