基本语法
@media +（ not | only） + 媒体类型 +（and+ 媒体查询）
媒体类型：screen（电脑屏幕），print （打印或者打印预览），all（所有设备）
- Q：媒体类型？
A：用来匹配查询条件的，就是你是要以什么标准去匹配，是按照屏幕大小改变的条件去匹配还是按照打印的方式去匹配。 - Q：and+媒体查询？
A：用来限制查询条件的，例如当屏幕小于最大宽度时，@media中的class就起作用了。
媒体类型单条件限制实例
当屏幕宽度小于778px的时候，.blog-media.wf-td 类的元素不会被显示（用于在移动设备下隐藏一些类的特性）
@media (max-width: 778px) {
.blog-media.wf-td {
display: none !important;
}
}媒体类型多条件限制实例
当屏幕宽度在678px到992px之间时，.box类的背景颜色为红色
@media screen and （min-width:678px） and (max-width:992px){
.box {
background-color:red;
}
}only：用来匹配媒体类型，表示只对该媒体类型适用
只对screen类型起作用，对于print等其他设备不起作用
@media only screen
and （max-width:678px）{
.box {
background-color:red;
}
}not就是对于除了该媒体类型的其他类型起作用
对于screen类型不起作用，其他类型起作用
@media not screen and （max-width:678px）{
.box {
background-color:red;
}
}实例
/* When the width is less than 778PX, the following elements take effect */
/* Hide feature images under mobile devices begin */
@media (max-width: 778px) {
.blog-media.wf-td {
display: none !important;
}
}
/* Hide feature images under mobile devices end */
/* When the width above 778px, the following elements take effect begin */
@media screen and (min-width: 778px){
.blog-media.wf-td {
width: 25% !important;
border-radius: 5% !important;
}
.rollover i, .blog-media.wf-td {
border-radius: 5% !important;
}
.blog-media.wf-td img {
height: 163.75px !important;
border-radius: 5% !important;
}
.blog-content.wf-td {
width: 75% !important;
}
}
/* When the width above 778px, the following elements take effect end *//* When the width above 778px, the following elements take effect begin */
@media screen and (min-width: 778px){
/* Hide feature images under categories begin */
.alignnone {
display: none !important;
}
/* Hide feature images under categories end */
.blog-media.wf-td {
width: 190px !important;
}
.blog-content.wf-td {
width: 75% !important;
}
.rollover i, .blog-media.wf-td, .blog-media.wf-td img {
border-radius: 5% !important;
}
.blog-media.wf-td img {
width: 160px !important;
height: 160px !important;
/*border-radius: 5% !important;*/
}
/* When the width above 778px, the following elements take effect end */
}
/*
.round-images a.rollover, .round-images img {
border-radius: 50% !important;
}*/
.mini-post-img img {
border-radius: 10% !important;
}
.post-rollover i, .post-thumbnail-rollover {
border-radius: 10% !important;
}@media screen and (max-width: 778px) {
img[class="hide"] {
display: none !important;
}
}