简介
我这么理解:响应式布局就是一个网站能够兼容多个设备,可以根据屏幕的大小自动调整页面的展示方式以及布局,我们不用为每一个设备做一个特定的版本。响应式网站的特点:
- 同时适配PC+平板+手机等
- 网站的布局会根据视口来调整模块的大小和高度
- 响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理来设置差异化的css样式
一、是什么?
响应式网站设计(Responsive Web Design)是一种网络页面设计布局,页面的设计与开发应当更具用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的相应和调整。
描述响应式界面最著名的一句话就是“Content is like water”,大白话便是“如果将屏幕看作容器,那么内容就像水一样”
响应式网站常见特点:
- 同时适配PC + 平板 + 手机等
- 标签导航在接近手持终端设备时改变为经典的抽屉式导航
- 网站的布局会根据视口来调整模块的大小和位置
二、实现方式
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸来做处理,为了处理移动端,页面头部必须有meta声明viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maxim