web前端怎样做响应式

1、所谓的响应式就是使网站在电脑，平板，手机登不同分辨率的终端上有正常的访问体验，相信有人体验过有些pc端网页在移动设备上访问的尴尬，下面介绍一下web实现响应式。

3、我们利用媒体查询来实现不同分辨率下的显示正常@media screen and (max-width: 375px) { //分辨率在375下的样式 ......}也可以设置最小的宽度@media only screen and (min-width: 320px) and (max-width: 767px) { //分辨率在320~767px内的样式 ......}正常显示如图一显示，然后修改为手机模式为如图二显示

5、栅格化布局，本例利用bootstarp的栅格系统下图是利用.col-xs-*和.col-md-*，看下图2和图3可以很清楚的看到，根据窗口的改变，模块的位置也进行了改变。注：bootstrap栅格参数说明.col-xs-：手机<768px.col-sm-：平板≥768px.col-md-：桌面显示器 ≥992px.col-lg-：大桌面显示器 ≥1200px