网页设计的相关概念(网页设计的概述)

　　你是否正在开发两套网站，一套给移动设备，一套给大显示器?又或者你已听说过“响应式网页设计”但却不确定如何将HTML5、CSS3和响应式设计融合在一起?如果是，那么看完这里可以让你在所有竞争对手之前，将你的网站提升到一个更高层次。

　　如果让用户浏览网站时兼容手机，电脑端不同的版本，就要考虑处理方式，如果想下站点的一些页面在宽屏显示器另一行显示更多的内容，必须为宽屏版量身定制，很多人并不是在全屏的情况下浏览我们的页面，如果让页面随着浏览器宽度改变而相应的调整会不会比较好?

　　响应网页设计概念是页面设计和开发应根据设备环境(屏幕大小、屏幕定位、系统平台、等)和用户行为(改变窗口大小等)响应并作出相应调整。具体做法包括许多方面,包括弹性网格和布局、图像、CSS媒体查询使用,等用户是否使用电脑,平板电脑,或者手机,是否全屏或半屏,屏幕是水平或垂直,页面应该能够自动切换分辨率,图像大小和相关脚本函数,等等,以适应不同的设备。

　　设备及其性能总是与时俱进。事实上，我们不仅仅要面对不同的视口尺寸，还得考虑高分辨率显示屏。iPhone 4是第一款被广泛使用的高分辨率设备。它的屏幕大小为960乘以640像素，分辨率为每英寸326个像素，是上一个版本iPhone(iPhone 3GS)及2011年的15" MacBook Pro笔记本分辨率的两倍。预计其他设备，从平板电脑到笔记本电脑再到台式机都会跟风。幸好，我们的响应式工具已经提供了方法，可以为这类设备提供增强支持。

　　在设计上，响应网页针对具有分辨率和设备环境上的不同，这只是针对单一的页面，因此，在开发，开发,维护和运营,相对于多个版本,可以节省成本。而在移动设备屡见不鲜,通常只适用于一些新的尺寸，定制版本的规格设备,如果新设备分辨率变化较大,常常不能兼容,以及新版本的发展需要时间,这次访问是一个问题,但响应网页Web设计可以阻止这个问题的发生。

　　响应式网页设计最初是由 Ethan Marcotte 提出的一个概念，当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先。

　　虽然可通过监测用户UA来判断用户终端后做跳转，但它还是分配了多个域，而响应式无需监测用户UA没有域的切换，只需根据终端类型来适配不同的功能模块与表现样式，它是跨平台和终端的，1页面适配多终端。

　　如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况?

　　那么我们要怎么做?

　　使用 viewport meta 标签在手机浏览器上控制布局，通过快捷方式打开时全屏显示，隐藏状态栏，iPhone会将看起来像电话号码的数字添加电话连接，应当关闭。

　　带宽是手机终端的硬伤，如果我们只是页面布局做了响应式处理，在我们用手机访问时，海淘科技十年响应式建站公司要说的是，请求的图片还是PC上的大图;文件体积大，消耗流量多，请求延时长，因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。

　　处理原理：浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片，如屏幕分辨率320*480，那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高，也就是高清屏，那么我们就得输出2倍分辨率的图形(宽:640px);以保证在高清屏下图形的清晰度。

　　解决方案：其实W3C已经有一个用于响应式图形的草案：新定义标签，因为它还只是草案，目前还没有支持的浏览器，期待在不久的未来我们能用上。

　　随着移动设备的日益普及，我们之前从未预见到的新设备也将陆续加入上网冲浪的队伍。响应式设计无疑为我们提供了一套可靠且面向未来的方法，让我们的响应式网站无论在任何设备、任何视口中，也无论是否在线，都能快速响应。