根据屏幕分辨率加载不同CSS内容显示不同内容的简单方法

本站手机访问的时候一直显示不了搜索框，今天早上起来的比较早，解决一下这个问题，代码改好了，但不想让电脑端显示，百度了一下CSS代码，在此记录一下，避免忘记。

要根据屏幕分辨率显示不同的CSS内容，可以使用媒体查询（Media Queries）在CSS中定义不同的样式规则，这些规则会根据屏幕宽度和高度自动应用。

下面是一个简单的例子，演示了如何使用CSS媒体查询来根据屏幕分辨率改变背景颜色：

/* 默认样式 */
body {
  background-color: blue;
}
 
/* 当屏幕宽度小于或等于768像素时 */
@media screen and (max-width: 768px) {
  body {
    background-color: red;
  }
}
 
/* 当屏幕宽度在600像素到768像素之间时 */
@media screen and (min-width: 600px) and (max-width: 768px) {
  body {
    background-color: green;
  }
}

在这个例子中，默认情况下背景颜色是蓝色的，当屏幕宽度减小到768像素或以下时背景颜色变成红色，在600像素到768像素之间时背景颜色变成绿色。当屏幕分辨率超过768像素时，将应用默认的蓝色背景样式。

上面是限制屏幕最大宽度的CSS，如果限制屏幕最小宽度值：

/* 当屏幕宽度大于或等于768像素时 */
@media screen and (min-width: 768px) {
  body {
    background-color: red;
  }
}

这样就可以了。

-----更多解释------
简单理解为可视区域最小宽度为900px，即大于900px下生效。

@media screen and (min-width: 900px) {

.class {

background: #fff;

}

}

总结为：如果对min 就是如果宽度在大于min的值时生效， max 如果宽度小于max的值时生效。

直接在link中判断设备的尺寸，然后引用不同的css文件：

@media #### and (min-width: 900px) 

####的值解释：

all——用于所有多媒体设备

print——用于打印机

screen——用于电脑、平板、智能手机等

speech——用于屏幕阅读器

**not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

only: 用来定某种特别的媒体类型。

仅电脑设备中的页面最大可见区域宽度为 1068px 时

显示其定义的样式。

@media only screen and (max-width: 1068px)

all: 所有设备，这个应该经常看到。**

@media screen and (min-width: 1200px) { css-code; }

@media screen and(min-width: 960px) and (max-width: 1199px) { css-code; }

@media screen and(min-width: 768px) and (max-width: 959px) { css-code; }

@media screen and(min-width: 480px) and (max-width: 767px) { css-code; }

@media screen and (max-width: 479px) { css-code; }

只写max-width的话由大像素写到小像素，min-width按小像素到大像素的顺序