媒体查询&响应式布局

媒体查询

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

  • 语法:
    @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连接符号继续书写即可

你可能感兴趣的:(媒体,css,css3)