web前端媒体查询的知识点

相应式布局和媒体查询是不分家的

写在标签里面

/*只有在打印机或打印预览的时候才会应用的样式

没有任何的优先级，只有执行顺序的问题*/

@media print{

   h1{

background:transparent;

}

}

/*只有在屏幕上才应用的样式，是最常用的*/

@ screen{

h1{

font-family:”翩翩体-简”;

}

}

/*所有的设备都会使用的样式*/

@media all{

h1{

       color:red;

}

}

/*检测到视口的宽度为800px时，才会应用如下样式*/

@media (width:800px){

     h1{

           background-color:green;

}

}

/*检测到视口宽度小于等于700px时，应用如下样式*/

@media(max-width:700px){

     h1{

background-color:orange;

}

}

/*检测到视口的宽度大于等于900px时，应用如下样式 */

@media (min-width:900px) {

h1{

            background-color:skyblue;

}

}

/*后面写的样式会覆盖前面写的样式*/

@media(height:800px){

     h1{

background-color:yellow;

}

}

/*检测到屏幕宽度等于1536时，应用如下样式*/

@media(device-width:1536px){

      h1{

   color:white;

}

}

在媒体查询中也可以用“且”和“或”运算符

且运算符

@media (min-width:700px) and (max-width:800px)

@media screen and (min-width:700px) and (max-width:800px)

或运算符

@media(max-width:700px),(min-width:800px){

 h1{

    background-color:orange;

}

}

@media(max-width:700px) or  (min-width:800px){

 h1{

    background-color:orange;

}

}

/*否定运算符*/

@media not screen{

     h1{

  background-color:orange;

}

}

/*肯定运算符*/

@media only screen and (width:800px){

    h1{}

}

响应式布局常用阈值可以分为：

超小屏幕   小于 768px

中等屏幕   768px 到 992px

大屏幕     992px 到 1200px

超大屏幕   大于1200px

媒体查询也可以写为

相应式布局结合外部样式的写法

用法一

用法二

@media screen and (max-width;768px) {

    /*CSS -Code*/

}

@media screen and (min-width:768px) and (max-width:1200px) {

/*CSS-Code;*/

}