hooyantsing's Blog

P243_5_样式表中使用@media局部定义响应查询

字数统计: 204阅读时长: 1 min
2020/04/25

P243 5 样式表中使用@media局部定义响应查询

@media

根据屏幕尺寸不同,动态的改变杨式布局。

media.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="houdunren.css">
</head>
<body>
<div class="navbar">
    <a href="">houdunren</a>
    <ul>
        <li>视频教程</li>
        <li>每晚直播</li>
        <li>在线文档</li>
    </ul>
</div>
</body>
</html>

houdunren.less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.navbar{
  height: 60px;
  width: 900px;
  display: flex;
  align-items: center;
  background: #f3f3f3;
  margin: 0 auto;
  ul{
    list-style: none;
    display: flex;
  }
}

@media screen and (max-width: 600px){
  .navbar{
    ul{
      display: none;
    }
  }
}

IDEA安装less插件

less自动生成css和map文件。

CATALOG