CSS实现项目响应式咨询：@media失效且排除Bootstrap的解决办法

嘿，我看了你遇到的问题，先揪出你现有代码里的关键错误——你在@media查询里给body设置了固定的width和height（411px、823px），这直接把页面锁死在这个尺寸里，完全违背了响应式“适配不同屏幕”的核心，这就是为啥你的页面完全没响应式效果的原因！

接下来，除了Bootstrap，这些原生CSS技术就能帮你实现响应式布局：

1. 先把媒体查询的错误改掉 #

首先把你现有代码里的固定宽高删掉，换成自适应的写法，比如：

@media screen and (max-width: 600px) {
    body{
        background: #00644C;
        font-family: Inter;
        /* 去掉固定宽高，让body自动适配屏幕宽度 */
    }
    /* 小屏幕下调整容器和元素 */
    .container {
        width: 90%; /* 用百分比代替固定像素，适配不同屏幕 */
        margin: 0 auto; /* 让容器居中 */
    }
    label {
        padding-left: 1rem; /* 用rem替代固定px，适配不同字体缩放 */
    }
    input[type=submit] {
        width: 100% !important; /* 让按钮占满容器宽度，不用固定20em */
    }
}

2. 用Flexbox做自适应布局 #

Flexbox是原生CSS最常用的响应式工具，能轻松搞定元素的排列、对齐和换行，比如你的表单可以这么写：

.container {
    display: flex;
    flex-direction: column; /* 让子元素垂直排列 */
    gap: 1rem; /* 给输入框、标签之间加间距，比margin更灵活 */
    width: 90%;
    max-width: 309px; /* 限制最大宽度，避免大屏上太宽 */
    margin: 0 auto;
}
.container input {
    width: 100%;
}

3. 复杂布局用CSS Grid #

如果以后需要多列布局（比如表单分两列），Grid比Flexbox更顺手，它能直接定义行列：

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    /* 自动适配列数，每列最小200px，超过后自动均分宽度 */
    gap: 1rem;
}

4. 全用相对单位替代固定像素 #

把代码里的px换成相对单位，这是响应式的基础：

• rem：基于根元素字体大小，比如1rem默认是16px，用户调整系统字体时会自动缩放
• vw/vh：基于视口宽度/高度，比如width: 80vw就是占屏幕宽度的80%
• %：基于父元素的尺寸，比如子元素width: 100%就会填满父容器

5. 移动优先的设计思路 #

建议改成移动优先的写法：先写小屏幕的基础样式，再用min-width的媒体查询适配大屏，这样代码更清晰，也更符合用户的浏览习惯（现在移动端用户更多）：

/* 移动端基础样式（默认就是小屏幕） */
body {
    background: #00644C;
    font-family: Inter;
}
.container {
    width: 90%;
    margin: 0 auto;
}
label {
    padding-left: 1rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* 大屏适配（屏幕宽度超过600px时生效） */
@media screen and (min-width: 600px) {
    .container {
        max-width: 309px;
    }
    label {
        padding-left: 70px;
    }
}

6. 别忘了响应式媒体 #

如果页面里有图片、视频，要确保它们也能适配：

img, video {
    max-width: 100%;
    height: auto; /* 保持媒体的原始比例，不会拉伸变形 */
}

总结一下，你现在最紧急的是把媒体查询里的固定宽高删掉，然后结合上面这些原生CSS技术，就能实现流畅的响应式布局，完全不需要依赖Bootstrap。

内容的提问来源于stack exchange，提问作者WAP