什么是响应式设计?响应式设计的基本原理是什么?如何做?

258 阅读1分钟

也叫响应式布局,响应式开发

实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局,从而在每种设备屏幕宽度下呈现的界面是不同的

基本原理:

一个网站适配所有终端,实现不同屏幕分辨率下的终端上网页的不同布局;使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而达到适配不同屏幕的目的

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

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

属性对应如下:

·        width=device-width: 是自适应手机屏幕的尺寸宽度

·        maximum-scale:是缩放比例的最大值

·        inital-scale:是缩放的初始化

·        user-scalable:是用户的可以缩放的操作

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

  • 媒体查询
  • 百分比
  • vw/vh
  • rem