基本语法

目标：能够根据设备宽度的变化，设置差异化样式

需求

  • 默认网页背景色是灰色
  • 屏幕宽度在768-992之间, 网页背景色是粉色
  • 屏幕宽度在992-1200之间, 网页背景色是skyblue
  • 屏幕宽度大于1200, 网页背景色是绿色

image.png

媒体特性常用写法

  • max-width
  • min-width
    1. @media(媒体特性){
    2. 选择器{
    3.    样式代码 
    4. }
    5. }

完整写法

@media 关键词  媒体类型  and （媒体特性）{
   CSS代码 
}

and
only
not
媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

媒体类型 值 描述
屏幕 screen 带屏幕的设备
打印预览 print 打印阅览模式
阅读器 speech 屏幕阅读模式
不区分类型 all 默认值，包括以上3中情形 
<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xxx.css">