css - 如何在 bootstrap responsive 中创建媒体查询

Question

我已经开始实现 boostrap 3.0 响应式设计
如何在 bootstrap 响应式中创建媒体查询，我是 bootstrap 3 的新手，如何添加响应式媒体查询。

Answer 1

在 main.php 的头部添加 meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

添加css并编写代码

<link rel="stylesheet" href="your_css.css">


/* ---------------------------------------------------------------------- */
/*  From Medium Devices Up To Larger Devices
 /* ---------------------------------------------------------------------- */
@media (min-width: 980px) and (max-width: 1199px) {


/* ---------------------------------------------------------------------- */
/*  Only larger Devices
 /* ---------------------------------------------------------------------- */
@media (min-width: 1200px) {

}

/* ---------------------------------------------------------------------- */
/*  From Small Devices Up To Medium Devices
 /* ---------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 979px) {

}
/* ---------------------------------------------------------------------- */
/*  Extra Small Devices Only
/* ---------------------------------------------------------------------- */
@media (max-width: 767px) {

}
/* ---------------------------------------------------------------------- */
/*  Extra Small Devices Only
/* ---------------------------------------------------------------------- */
@media (max-width: 480px) {
    /***

}
/* ---------------------------------------------------------------------- */
/*  Up To Medium Devices
/* ---------------------------------------------------------------------- */
@media (max-width: 979px) {
    /***
     general body settings
     ***/


}
/* ---------------------------------------------------------------------- */
/*  Up To Medium Devices
/* ---------------------------------------------------------------------- */
@media (min-width: 768px) {

}