媒体查询&响应式布局

媒体查询

(是一种技术，检测设备大小)

• 语法：
  @media 设备类型 修饰符号 (媒体特性-判断条件){css语法}
  - @media 表示使用媒体查询 媒介
  - 设备类型 手机、电脑、pad、打印机 all
  - 修饰符号 and 连接符
  - 媒体特性 检测常用的是用户的屏幕大小 min-width/max-width
  - css语法

  例如：在300px~500px 盒子300px 背景颜色是绿色的

@media all and (min-width:300px) and (max-width:500px){
div{
width: 300px;
height: 300px;
background: green
}
}

+ 响应式 (是页面布局 会根据不同的设备屏幕大小进行检测，检测处不同的屏幕的屏幕设备，会改变已有的布局模式)
+ 开发的特点：
-面对不同分辨率设备灵活性强
-能够快捷解决多设备显示适应问题
+ 缺点：
-兼容各种设备工作量大，效率低下
-代码累赘，会出现隐藏无用的元素，加载时间加长
-这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
-一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

媒体查询引用方式

1. link方式
2. @import 方式

link 和 @import 区别

1. 本质的区别：link属于XHTML标签，而@import完全是css提供的一种方式
2. 加载顺序：link是页面加载的时候同时加载引入的样式，而@import是页面加载完成后，再加载引入的样式
3. 兼容性问题：link是xhtml中的标签，所以兼容所有浏览器。但@import是在CSS2.1提出的，所以低版本的浏览器会不兼容。
4. link是可以通过js来改变样式的，@import就是不可以的；link可以引入除了css以为的其他文件，但@import只能引入css文件。

#媒体查询需要注意的点
- 媒体查询主要是检测不同屏幕从而设置不同的css样式 后面检测设置的样式要把前面的样式给覆盖掉 所以在设置css样式的时候要把媒体查询写在当前样式的最下面 权重高的、写在后面的样式才会覆盖
- 书写媒体查询的时候 每一个单词之间都要写空格 不然没有效果(css写错了不会报错)
- 检测媒体特性可以使用多个判断条件 如果有多个判断条件的时候 后面加and连接符号继续书写即可