【html】响应式css

1.必须引入标签：
设置 meta 标签

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

在设置视口时需要注意，视口就是网页可见区域的尺寸，设置视口时只设置宽度就行，不用在乎高度，具体高度由网页内容自动撑开。上面 meta 标签中内容的含义如下：

• viewport：即视口，表示网页的可视区域；
• width：控制 viewport 的大小，可以指定一个具体的值，例如 600，也可以是由关键字组成的特殊值，例如 device-width 就表示设备的宽度；
• initial-scale：表示初始缩放比例，也就是页面第一次加载时的缩放比例；
• maximum-scale：表示允许用户缩放的最大比例，范围从 0 到 10.0；
• minimum-scale：表示允许用户缩放到最小比例，范围从 0 到 10.0；
• user-scalable：表示用户是否可以手动缩放，“yes”表示允许缩放，“no”表示禁止缩放。

2.编写新的css样式（满足条件时，使用新得css）：

// 屏幕尺寸小于480px使用的样式
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}