响应式布局基础

Posted 2020-07-20 神靖希希

一、什么是响应式布局

1.让一个网站可兼容不同分辨率的设备

2.给用户更好的视觉使用体验

诞生背景： 移动互联网的多终端的显示

http：//www.jser.me

二、响应式设计的优缺点

优点： 解决了设备之间的差异化展示

缺点： 兼容性代码多，工作量大，加载速度受影响；

　　　对原有网站布局会产生影响，用户判读未必精确

三、响应式设计的原则

1.移动优先：　　在设计的初期就要考虑的页面如何在多终端展示

2.渐进增强：　　充分发挥硬件设备的最大功能

四、如何实现响应式布局

1.CSS3-Media Query（最简单的方式）

2.借助原生javascript（成本高，不推荐使用）

3.第三方开源框架（可以很好的支持浏览器响应式布局的设计）