@media 媒体查询，响应式布局

近期，需要做响应式布局，话说，好久没做过响应式了，回顾一下

定义和使用

使用 @media 媒体查询，主要针对不同的媒体类型定义不同的样式。根据不同的屏幕尺寸来设置不同的样式，实现响应式布局。。。

用法

1）eg: @media screen and  (max-width: 750px) {
    　　　　background: red;
　　　　}

2) eg:  <link rel="stylesheet" type="text/css" href="print.css" media="all"/>

类型

 

screen	计算机屏幕（默认）。
tty	电传打字机以及类似的使用等宽字符网格的媒介。
tv	电视机类型设备（低分辨率、有限的滚屏能力）。
projection	放映机。
handheld	手持设备（小屏幕、有限带宽）。
print	打印预览模式/打印页面。
all	适用于所有设备。

 

转载于:https://www.cnblogs.com/xiaopanger/p/9925516.html