如何在bootstrap响应中创建媒体查询

Question

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

Answer 1

在主.php

的头部添加元标记

<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) {

}