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的设备上起作用,pc大尺寸屏幕,这段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 电视机类型设备(低分辨率、有限的滚屏能力)。