5/8

为您的设计
寻找专业的前端切图服务。

什么是响应式web设计?
响应式web设计最早来自国外”Responsive Web Design”概念, 而网上对响应式web设计的解释大都千篇一律,摘来摘去,这里切图网www.qietu.com 以长期的响应式前端开发为背景,和从前端的角度对响应式设计做出解释,欢迎转载,但请尊重我们辛苦的打码的不易,保留该文地址,谢谢。
响应式web设计核心代码和实现机制
响应式设计是一项基于css3 media query (css3多媒体查询技术来实现的),无论响应式设计看起来多么高大上,实现起来多么复杂,其实在实现上是可以简化的,可以抓住它的核心代码,响应式的核心代码是:
@media screen and (max-width: 650px) {
….
}
这段代码是当浏览器窗口宽度小于650px时候,网页要呈现的样子,大括号里面写css定义。
响应后的网站能够在手机、平板等设备下友好访问,当然有一点不难理解,就是响应式也同样对 pc上 宽屏幕和窄屏幕有效,因为它的机制是通过 浏览器宽度判断来实现的,所以这跟大家理解的响应式是用于手机端访问的不同,响应式同样可以用在pc端。
响应式web设计 和 独立webapp 的争执?
很多人应该都会在这两方面纠结过 ,我到底要做pc响应式设计 还是独立做个 webapp呢? 要如何选择?这里切图网从底层开发者的角度分析两者的利弊后,你可以很快的做出决定,这也是在以往项目中对客户解释比较多的,现在写出来供还不是我们客户的人分享。
响应式web设计的存在主要是为了解决一个问题 —— 让传统pc网站在手机、平板等移动设备下友好显示。(注意:是友好显示。)能够让pc网站在手机等设备下能够访问就很ok了,当然也会尽大可能的让其好看,这种情况下,你不能过分的要求响应后的网页非常非常的漂亮,这一点很难做到。原因是 响应式布局,手机下的排版其实也是 遵循pc网页的结构的 ,只是对结构进行一些微调使其在手机这种小屏幕下能访问。这是技术层面的限制。
如果我对设计感要求很高,要手机端下的网页也非常非常好看要怎么办呢?那么就建议你单独做一个webapp手机版网站,这种情况下你可以随意发挥,网页想设计成什么样就设计成什么样,我们都可以切出来,这种效果就会很好看。所以综合两者利弊,你是否可以做决定了呢?
响应式web设计需要了解的。
响应式web设计是基于html5 和css3的,所以我们所了解到的ie6~ie8不支持html5所以没法查看响应式web设计效果,需要在ie9+,firefox,chrome等对html5+css3标准支持比较好的浏览器下浏览,这不是技术层面的问题,所以容易理解。当你考虑做web响应式设计的时候,你必须要放弃使用ie6~ie8的用户。(现在的情况,是尽管ie~ie8的用户还是很多,但是依然挡不住很多网站采用响应式设计,我们也相信在不久将来,这种不支持html5+css3不与时俱进的浏览器最终将很快被遗弃。)
文/切图网