Web前端-HeadFirst笔记-CH9-多个样式表-media

原理

样式表的顺序代表优先级。

应用

1. 修改样式，可能不需要修改样式表。只需要链接这个样式表，然后在下面提供自己的样式表，指定要修改的样式。
2. 可以针对不同设备选择不同的样式表。
   

方法——不同设备的样式表选择

1. html中：link标记中媒体查询-media

添加多个link标记，通过创建一个“媒体查询”来指定设备类型，涵盖不同的设备。

html-head：  <link media="指定应用此样式表的设备类型"  href="文件源" rel="stylesheet"  >

2. CSS中：@media 媒体查询{与查询匹配的规则}

不在匹配查询中的规则可以适用于所有设备页面。

3. 对比：当CSS非常庞大，使用html-link较好。

Tips-常用属性

• 最大最小屏幕宽度min-device-width\max-device-width
• 最大最小浏览器宽度：max-width\min-width
• 显示方向（orientation/landscape/portrait）
• 颜色
• 宽高比
• more--->CSS3媒体查询规范

  IE8不支持媒体查询。