响应式布局是css中常被提到的一个词,而目前最流行的方式就是对于不同浏览器和设备的动态布局设计,他会根据不同浏览器和设备尺寸的变化动态地改变网页的布局和内容.
响应式布局由三部分组成:流式布局,媒体查询和灵活的媒体类型,今天主要学习媒体查询.
媒体查询
在样式中加入媒体查询的目的就是针对不同类型的媒体设备设置不同的样式.
- 初始化媒体查询
就是以何种方式加入媒体查询,有几种方式,在此就说一种比较推荐的方式,在css样式表中使用@media规则
例如:
@media screen and (max-width: 600px){...}
上边这一行代码就初始化了媒体查询,针对的是屏幕小于600px的媒体设置样式.
媒体查询中的逻辑运算符
and(与),not(非),only(唯一)
例如:
@media screen and (max-width: 600px) and (min-width: 200px){...}
@media not screen and (max-width: 600px) and (min-width: 200px){...}
@media only screen{...}
有了媒体查询逻辑运算符,我们就可以灵活的组合媒体类型和设置条件.
媒体特性中的宽高
因为经常要根据设备尺寸的不同进行样式设置,所以宽高用到的频率是非常高的;
height,width,device-height,device-width,并且都可以以max或者min作为前缀.
上边的代码中已经有用到过,在此不再举例
媒体特性中的屏幕方向
横屏就是宽大于高,竖屏就是高大于宽,这个在移动设备中应用尤为广泛.
orientation：portrait | landscape
portrait:竖屏
landscape:横屏
@media all and (orientation: landscape) {...}
########媒体特性中的长宽比
min-device-pixel-ratio: width/height
例如:@media all and (min-device-pixel-ratio: 16/9) {...}
媒体特性中还有其他很多点,以上是平时比较常用的.
