什么是照应式web设计 (什么叫照应)

文章编号：26807 / 分类：互联网资讯 / 更新时间：2024-09-22 15:37:31 / 浏览：次

如何了解照应式设计

在设计中经常遇到这几个疑问：

1.想要网站兼容手机、平板电脑、pc，就得为不同的设施定制不同的版本。

2.想要网站的某些页面在宽屏显示器下一行显示更多的内容，又得为宽屏定制一个版本。

3.很多人并不是在全屏的状况下阅读咱们的页面，假设让页面随着阅读器宽度扭转而相应的调整会不会比拟好？

有没有方法能有效处置这些疑问呢？

照应式Web设计(ResponsiveWebdesign)的理念是页面的设计与开发应当依据设施环境（屏幕尺寸、屏幕定向、系统平台等）以及用户行为（扭转窗口大小等）启动相应的照应和调整。

详细的通常方式由多方面组成，包含弹性网格和规划、图片、CSSmediaquery的经常使用等。

无论用户正在经常使用pc、平板电脑，或许手机，无论是全屏显示还是非全屏的状况，无论屏幕是横向还是竖向，页面都应该能够智能切换分辨率、图片尺寸及关系脚本配置等，以顺应不同设施。

照应式web设计对交互设计和前端成功提出了更高的要求，须要思考分明不同分辨率下页面的规划变动、内容的缩放等。

照应式Web设计的好处：

1、开发、保养、经营老本好处：页面只要一个，只是针对不同的分辨率、不同的设施环境启动了一些不同的设计，所以在开发、保养和经营上，相对多个版本，能浪费老本。

2、兼容性好处：移动设施新的尺寸层出不穷，定制的版本通常只实用于某些规格的设施，假设新的设施分辨率变动较大，则往往不能兼容，而开发新的版本须要期间，这段期间内的访问就是个疑问，然而照应式Web设计可以提早预防这个疑问。

3、操作灵敏：照应式设计是针对页面的，可以只对必要的页面启动改动，其余页面不受影响。

当阅读器宽度变小时，左右两栏的宽度都有增加，左边的banner图片和视频也相应增加，左边的头像列表由一排4个变为一排两个。

当阅读器宽度进一步变小后，页面由两栏结构变为一栏结构，局部内容的尺寸进一步增加，搜查区域也从导航里挪到了导航外。

照应式页面的设计流程：

第一步：确定须要兼容的设施类型、屏幕尺寸

经过用户钻研，了解用户经常使用的设施散布状况，确定须要兼容的设施类型、屏幕尺寸。

设施类型：包含移动设施（手机、平板）和pc。

关于移动设施，设计和成功的时刻留意加入手势的配置。

屏幕尺寸：包含各种手机屏幕的尺寸（包含横向和竖向）、各种平板的尺寸（包含横向和竖向）、个别电脑屏幕和宽屏。