@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 | 手持设备(小屏幕、有限带宽)。 |
打印预览模式/打印页面。 | |
all | 适用于所有设备。 |