【CSS】说说响应式布局

最新推荐文章于 2025-05-30 13:50:55 发布

早睡第一人

最新推荐文章于 2025-05-30 13:50:55 发布

阅读量945

点赞数 2

CC 4.0 BY-SA版权

文章标签： css html 前端

本文介绍了响应式设计的核心概念，如何通过媒体查询、百分比、vw/vh实现布局自适应，以及其优点和缺点。重点强调了使用这些技术进行跨设备兼容和流式布局的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、是什么

响应式设计简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

· 响应式网站常见特点：

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。为了适应屏幕，多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。

可以使用 meta 标签的 viewport 属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。这段代码写在 <head>里面。

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

实现响应式布局的方式有如下：

CSS3中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表使用@Media查询，可以针对不同的媒体类型定义不同的样式，语法如下：

@media mediatype and|not|only (media feature) { CSS-Code;}

@media screen and (max-width: 1920px) { ... }

（当视口宽度小于1920px样式发生......改变）

@media screen (min-width: 400px) and (max-width: 600px) {
  body {
    font-size: 40px;
  }
}

(当视口宽度在大于等于400px并且小于等于600px，字体大小变为40px)

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式布局

当浏览器的宽度或者高度发生变化时，可以通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

但是每个属性都使用百分比，会照成布局的复杂度，所以不建议使用百分比来实现响应式。

vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

但是每个属性都使用vh/vw，会照成布局的复杂度，所以不建议使用vh/vw来实现响应式。

响应式设计实现通常会从以下几方面思考：

优点：

缺点：