link media不同情况引入不同css


有些时候,我们需要对一段css在不同尺寸的设备上使用,有些需要这段css,有些不需要这些css


这时候我们可以使用link media这个属性来操作。


比如 <link rel="stylesheet" media="screen and (max-width:720px)" href="/main.min.css"/>


这样mian.min.css只会尺寸小于720px的设备上起作用,大尺寸屏幕上,这段css不会引入。


有时候我们需要给在打印的时候,给元素添加一些样式,这时候我们可以这样引入css.


<link rel="stylesheet" media="print" href="/print.min.css"/>


这样这段print.min.css只会在打印的时候才起作用。如果想对于一些投影仪起作用,可以这样引入


<link rel="stylesheet" media="projection" href="/projection.min.css"/> 


其他情况可以参考下面这个表


all 默认。适用于所有设备。

aural 语音合成器。

braille 盲文反馈装置。

handheld 手持设备(小屏幕、有限带宽)。

projection 投影仪。

print 打印预览模式/打印页面。

screen 计算机屏幕。

tty 电传打字机以及类似的使用等宽字符网格的媒介。

tv 电视机类型设备(低分辨率、有限的滚屏能力)。


当然我们不仅可以通过这样在引入的时候判断那些尺寸设备使用哪些css,我们还可以在css中直接使用media来进行媒体查询,而这也是响应式的核心。