Bootstrap媒体查询

开发工具与关键技术：VS   Bootstrap媒体查询
作者:听民谣的老猫
撰写时间：2019/4/27   11:07

最近在抠模板过程中开发的一个Bootstrap新知识领域。

如果你想过同一个页面，手机有手机的样式布局，平板有平板的样式布局。不同设备响应不同的样式布局。那么你可以通过Bootstrap 媒体查询来达到这一想法。

为什么要用Bootstrap 媒体查询?

• 通过屏幕的大小来分辨你使用的设备
  额外的小设备（手机，小于 768px）
  小型设备（平板电脑，768px 起）
  中型设备（台式电脑，992px 起）
  大型设备（大台式电脑，1200px 起）
  当然如果你认为手机宽度是小于500px那么你在设值时就设置成500px

@media (max-width: 500px) {
          .main-nav .container {
           display: none;
            }
}

你可以改变分界面值，你可以将影响限制在更小的范围内。

• Bootstrap 媒体查询允许您基于视口大小移动、显示并隐藏内容。
  你设置不同的宽度，一旦屏幕达到那个宽度就会响应相应的布局
  通过一个案列来讲解一下
  

在这我设置的是这把吉他在手机屏幕下的样式改变

@media (max-width: 479px) {
	.guitar{
    transform: rotate(90deg);
	 margin-top: -82px;
    width: 122px;
	  }
}

视口宽度只要是不大于479px那么.guitar就旋转90度，并且给它上外边距设置为-82px宽度设置为122px。

然后通过调试将屏幕宽度调成手机屏幕宽度

同时你也可以隐藏它，这都是依靠个人的布局来决定的

假如你不用Bootstrap 网格系统来设置会是什么样呢?

那么手机用户的浏览你的这个页面也就毫无体验感，总不可能你让每个看这个页面的人都用电脑来浏览吧。

• Bootstrap主要用到min-width、max-width，以及and语法。

     @media (min-width: 992px) and (max-width: 1199px) {
            .navbar-right {
             padding: 0 30px 0 0;
             }
}   

三种语法的结合使用就产生了一个992px~1199px的像素区间，它所以设置的样式以及布局只有你视口宽度在这个区间才会响应。

媒体查询能很好的针对设备特性(视口宽度)来制定属于不同设备的不同CSS样式这就是为什么要用媒体查询。

并不是所有浏览器都支持媒体查询的。准确的来说，并不是所有浏览器都支持Bootstrap的。媒体查询只是Bootstrap的一部分。