picturebox图片自适应_什么是响应式界面 响应式布局与自适应布局的区别

　　什么是响应式界面

　　根据维基百科及其参考文献，理论上，响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样”。

　　为什么要设计响应式界面

　　为何按老办法为主流设计特殊版本呢?为什么要费神地尝试统一所有设备呢?

　　即便是PC或Mac用户，有查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知;

　　台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加，“主流设备”的概念正在消失;

　　屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别。

　　鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。

　　响应式界面的四个层次

　　1、同一页面在不同大小和比例上看起来都应该是舒适的;

　　2、同一页面在不同分辨率上看起来都应该是合理的;

　　4、同一页面在不同操作方式(如鼠标和触屏)下，体验应该是统一的;

　　5、同一页面在不同类型的设备(手机、平板、电脑)上，交互方式应该是符合习惯的。

　　响应式界面的基本规则

　　1、可伸缩的内容区块：内容区块的在一定程度上能够自动调整，以确保填满整个页面

　　2、可自由排布的内容区块：当页面尺寸变动较大时，能够减少/增加排布的列数

　　3、适应页面尺寸的边距：到页面尺寸发生更大变化时，区块的边距也应该变化

　　4、能够适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用

　　5、能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏

　　6、能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断

　　7、放弃使用像素作为尺寸单位：用dp尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致。同时也要求提供的图片应该比预想的更大，才能适应高分辨率的屏幕。否则，就会像我的Photoshop一样出现一下这种情况：

　　P.S. 图片似乎展示得不是很贴切，因为我的笔记本电脑的分辨率太高，Photoshop看起来特别小(字都很难看清)

　　很多人经常会对响应式布局和自适应式布局产生混淆，今天将为大家介绍这两者到底表示的是什么以及它们之间的区别。具有一定的参考作用，希望对大家有所帮助。

　　一：什么是响应式布局和自适应式布局

　　1.什么是响应式布局

　　响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。

　　2.什么是自适应式布局：

　　自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。

　　二：响应式布局与自适应布局的区别是什么

　　1.自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面;响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

　　2.自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。

　　3.自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。

　　4.自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。

　　总之，响应式布局还是要比自适应布局要好一点，但是自适应布局更加贴切实际，因为你只需要考虑几种状态就可以了而不是像响应式布局需要考虑非常多状态。所以的说无论哪种设计都有它们各自的特点，我们要根据项目的需求来选择适合的布局方式。

文章来自：https://www.xmzxb.com/a/xwdt/xydt/412.html