响应式网站设计是一种网页网页设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。
响应式网页设计(Responsive Web design,通常缩写为RWD)是指:页面的设计与开
发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。可以说是一种网页设计的技术做法,该设计可使网站在多种浏览设备(从桌面电脑显示器到移动电话或其他移动产品设备)上阅读和导航,同时减少缩放、平移和滚动。
应用:
1. 改变浏览器大小
基于“响应式内容”的本质,页面应该在任何合理屏幕大小的设备上看上去都很舒服,从300*300的手机到2550*1600像素的显示器。最快最方便的评估响应式功能的方式是大幅改变浏览器的大小,检查显示情况。
对于这类测试不需要任何搭建时间。只需要打开网页,点击浏览器的右上角,拖拽到所需的大小。文本是否在你认为应该在的位置,是否仍然可读?图像是否能合理伸缩?控件是否还在页面上——按钮,文本输入框,日期控件和其他的——是否仍然可用?它们有没有遮盖掉其他重要的内容?
最新的IE和Chrome版本有工具可以帮助调整浏览器尺寸到需要的合适大小,比如移动手机或者平板。
2.移动设备和旋转
移动设备使得响应式网页设计变得如此重要。移动设备也给响应性带来了一个新的要求:旋转。这些小型设备会跟着主人去任何地方。这些设备也可以随意旋转,从纵向到横向再转回来。这似乎和改变大小很类似。但是实际上设备的每次旋转之后,网页都需要重新渲染。
一些应用在改变大小时可能会改变自身行为 -- 比如,iOS7的计算器,在IPhone4的纵向模式下会隐藏科学计算选项。
3.响应式检查
响应式检查点的所有描述在网上都可以找到。其中的一些很简单,告诉你在不同的浏览器尺寸下网页看上去的样子。更多复杂的选项,比如BrowserStack,模拟一系列可能的屏幕尺寸和横向纵向模式切换能力的组合。这样的可配置性和模拟尺寸交互的组合可以帮助创建强大的响应式测试环境。
4.调整分辨率、触屏和鼠标、响应式的图片文字。
例如字体的响应式布局是使用rpx单位(responsive pixel),可以根据屏幕宽度进行自适应;相对的,屏幕分辨率、触屏、鼠标、图片也可以通过相应的单位,标签来实现。
扫描关注官方微信