（每日一题）面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？

最新推荐文章于 2024-04-16 11:43:37 发布

巨人的小脚丫

最新推荐文章于 2024-04-16 11:43:37 发布

阅读量242

点赞数

分类专栏： css面试题文章标签：前端 html javascript

本文链接：https://blog.csdn.net/itpeilibo/article/details/127168774

版权

响应式设计是让网站根据用户设备环境进行适应的一种布局方式。它通过媒体查询、百分比、vw/vh、rem等技术实现，确保在PC、平板、手机等设备上都能良好展示。虽然响应式设计能解决多设备适配问题，但也存在兼容性挑战、代码冗余和用户体验可能受影响等缺点。

摘要由CSDN通过智能技术生成

在这里插入图片描述

响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

描述响应式界面最著名的一句话就是“Content is like water”

大白话便是“如果将屏幕看作容器，那么内容就像水一样”

响应式网站常见特点：

在这里插入图片描述

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

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

属性对应如下：

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

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

使用@Media查询，可以针对不同的媒体类型定义不同的样式，如：

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

关注

专栏目录