PC端和移动端自适应问题解决方法

}

}

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

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

.class {

background: #fff;

}

}

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

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

mediatype:

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按小像素到大像素的顺序

-------------------------------------------------------------------------------------------------------------------------------------------------------- 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 -----------------------