开发工具与关键技术: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的一部分。