当年做响应式布局的时候用过媒介查询，media query。包括现在有的时候为了兼容也会用到一些，查找对应范围使用不同的样式

为了适应不同的设备终端

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

是用来适配各个尺寸设备的一个手段
最好还是写两套比较好

媒体查询可不只是为了适应终端尺寸的，比如你做了一个网页看起来很漂亮，手机电脑平板都没啥大问题，但是如果你需要打印出来的时候，你会发现布局好像不是那么回事了，而且有时候你希望的是我打印的时候是不需要打印一些只需要体现在网页上的元素，这些media query都可以解决的，例如：

@media print{
    .site-footer-credits{ display: none;}
    .noprint {display: none;}
    .page-header {text-align: left}
}

而这些，其实很多网页做的都不尽如人意

当年做响应式布局的时候用过媒介查询，media query。包括现在有的时候为了兼容也会用到一些，查找对应范围使用不同的样式

结合bootstrap使用，根据不同的屏宽设置不同的样式