响应式设计之Bootstrap浅谈

Posted 2021-04-29 小小前端路

响应式设计是目前比较流行的web应用技术，bootstrap也采用了这项技术，在不同的组件中广泛应用。本文讲详细额介绍响应式设计和实现的原理和基本用法。

一、认识响应式设计

       响应式设计可以使网页适应不同的设备，比如智能手机，平板电脑，tv、pc显示器、苹果手机、安卓手机，包括横向、纵向的屏幕。开发人员只需要正确的实现响应式web设计，网站就可以更好的适合兼容各种设备。

二、目前响应式web设计的实现途径包括：弹性网络布局，液态布局，弹性图片显示、使用Css Media Query技术等。基本的设计思想如下：

       1、保证页面元素及布局具有足够的弹性，来兼容各类设备平台和屏幕尺寸。

       2、增强可读性以及易用性，帮助用户在任何设备环境中都能更容易的获取最重要的信息。

三、响应式设计流程

       1、确定需要兼容的设备类型、屏幕尺寸。（移动设备与pc端对于移动设计与实现注意增加手势功能）

        屏幕尺寸：包括各种手机屏幕的尺寸（横向与纵向）、各种平板电脑的尺寸（横向与竖向）、计算机屏幕的尺寸。

      2、制作线框原型。针对确定需要适应的几个尺寸，分别制作不同的线框原型，需要考虑清楚不同尺寸下，页面布局如何变化，内容尺寸如何缩放，功能、内容如何删减，针对特殊的环境做特殊化的设计。这个过程就需要设计师与开发人员保持密切的沟通。

    3、测试线框原型，将项目导入到相应的设备进行一些简单的测试，尽早的发现可访问性以及可读性的存在的问题并解决。

    4、视觉设计。由于移动设备的屏幕分辨率与传统计算机的屏幕不一样，在设计时需要保证内容的可读性、控件可点击区域的面积等。

    5、脚本实现，与传统web开发相比，响应式设计的页面由于页面布局、内容尺寸发生了变化，所以最终产出可能与设计原稿出入比较大，需要开发人员与设计师多沟通。

在响应式设计思路中，一个重要的因素就是如何处理图片大小的问题。下篇文章将继续讲解响应式图片的设计方式以及思想。