前端面试：响应式设计的基本原理是什么？如何做？

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

响应式网站常见特点：

• 同时适配PC + 平板 + 手机等
• 标签导航在接近手持终端设备时改变为经典的抽屉式导航
• 网站的布局会根据视口来调整模块的大小和位置

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

• 媒体查询（我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表）
• 百分比
• vw/vh
• rem

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

• 弹性盒子（包括图片、表格、视频）和媒体查询等技术
• 使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围
• 使用相对单位使得内容自适应调节
• 选择断点，针对不同断点实现不同布局和内容展示