css 方式制作响应式布局基础原理 (@media适配不同大小窗口)

css 方式制作响应式布局基础原理 (@media适配不同大小窗口)

原理：使用css3 中媒体查询（@media）的方法

---

---

@media 的定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

---

具体实现

1. .html文件：

代码如下（示例）：

<!--制订一个有大小的容器，便于观测-->
<div class="bodyItem" style="width: 200px;height: 200px;">
</div>

---

2. .css文件：

/*
all		用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

and / not / only / all
not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

only: 用来定某种特别的媒体类型:
对于支持 Media Queries 的移动设备来说，如果存在 only 关键字，移动设备的 Web 浏览器会忽略 only关键字并直接根据后面的表达式应用样式文件。
对于不支持 Media Queries 的设备但能够读取 Media Type 类型的 Web浏览器，遇到 only 关键字时会忽略这个样式文件。only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

all: 所有设备，这个应该经常看到。在Media Query中如果没有明确指定Media Type，那么其默认为all
*/
/* （宽度为 374px） 或者更小尺寸的屏幕 */
@media only screen and (max-width:374px) {
    .bodyItem{
        background-color: red;
    }
}

/* （宽度为 375px ~ 宽度为 413px） 之间的屏幕 */
@media only screen and (min-width:375px) and (max-width:413px) {
    .bodyItem{
        background-color: blue;
    }
}

/* （宽度为 414px） 或者更大尺寸的屏幕 */
@media only screen and (min-width:414px) {
    .bodyItem{
        background-color: yellow;
    }
}

---

3. 分别在不同屏下的效果（截图大小截得不一样，具体看颜色变化）：

尺寸：Galaxy Fold (280~653) 屏幕下：

尺寸：Pixel 5 (393~851) 屏幕下：

尺寸：iPad Air (820~1180) 屏幕下：

注意事项

要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。