跨终端的Web

响应式Web设计(四):响应式Web设计的优化

柔情痞子 提交于 2019-12-07 15:49:47
这篇文章主要说说在进行响应式Web设计的过程中,涉及到页面的一些需要进行优化的地方: 1、 轻量级的Javascript库: 针对PC端网页当然会首选jQuery来作为前端javascript库,但是针对移动端来说,jQuery太重,而现在针对移动端来说,有很多优秀的框架可供使用,jQuery Mobile、YUI、XUI等是不错的框架,但是个人比较倾向于zepto。不过zepto预定义的一些事件,比如触屏滑动的swipe事件,在ios上完美支持,但是在android上,有些浏览器确实不支持的,这时候就需要寻求与一些第三方的javascript插件库,好在现在网上有很多优秀的第三方javascript插件库可供使用,所以各位按需索取吧。 2、 减少HTTP请求次数: 一个页面的初始加载使用HTTP请求来操作,没有任何问题,但是页面中比如翻页、筛选之类的操作,如果再使用完整的HTTP请求来处理的话,会加大网络传输的数据量,因为移动端有一个特殊的限制,就是用户的网络流量是有限的,超过之后会要交钱的。这时候针对这些页面内部的部分操作,可以使用Ajax异步请求来完成,针对短期内不会变化的一些数据,可以使用服务器端缓存、前端缓存等机制来保存这些数据,这样可以减少用户一定的数据请求量。 3、 压缩Javascript和CSS:

响应式Web设计(三):响应式Web设计的方法

与世无争的帅哥 提交于 2019-11-29 04:38:14
  介绍完响应式Web的背景和概念之后,是时候该介绍具体的实现方法了,其实响应式Web设计的方法很简单,就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。   首先我们一起来看看Media Queries,这里我只会对其做一个简单的列举介绍。(有兴趣深入的同学可以参考: http://www.w3.org/html/ig/zh/wiki/CSS3%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2 )   通过媒体查询的设置,我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种: 通过link标签: <link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" /> 示例代码代表当当前屏幕宽度小于479px的时候,加载testcssbywidth1.css文件来渲染页面。 CSS中直接设置: @media screen and (max-width:479px) { /* 具体的CSS属性设置 */ } 对于Media Queries的一些常用属性,只对常用的几个做一个简单列举说明,其他的属性请各位自行查阅相关资料:

响应式Web设计(一):响应式Web设计的背景

情到浓时终转凉″ 提交于 2019-11-29 04:38:02
  不是专业前端,可2011年底至今大部分时间在做着一个前端开发工程师的事情,所以多少也有点总结,多少也有点“经验”和分享。 响应式Web设计不是我首创的概念,早就有了,我这里只不过把自己最近这段时间关于这方面的研究做了一个总结。 至于这篇文章能给你带来多大的益处我保证不了,但是只从读完这篇文章之后你至少能明白以下几点: 为什么要做响应式Web设计? 什么是响应式Web设计? 如何做响应式Web设计? 送你几个关于响应式Web设计优化的小建议!   在说响应式Web设计前,我们先来看看移动互联网的发展现状: 移动互联网用户规模接近PC互联网用户规模,市场规模占比进一步增加,移动互联网成为主流(数据来源:CNNIC、艾瑞咨询);       网络设备多元化,智能手机将成为网络体验获取的重要终端。      从移动互联网的用户规模、市场规模、终端设备三个方面做了一个简单的说明,不难看出,未来互联网发展的几个方向: PC不再是互联网的主要入口,而且很有可能沦为一个次要入口; 移动已经成为第一屏幕; 移动技术将引领潮流。   移动互联网正走向一个百花齐放的时代:      中国互联网正在往移动方向发展,移动设备正在超过PC设备,成为互联网的常见设备,在这样一个客观背景下,我们不得不问自己:如何才能在不同的设备上呈现给用户同样的Web网页呢?      很显然,答案就是——响应式Web设计

响应式Web设计(二):响应式Web设计的概念

℡╲_俬逩灬. 提交于 2019-11-27 20:10:39
  首先感谢大家对第一篇背景介绍一文的支持,今天将对响应式Web设计的概念进行一个大概的介绍,当然这一篇也不是什么干货,只是作为一个主题来说,概念的介绍必不可少,下一篇就应该有点干货了。   从背景介绍一文中,我们可以得到这样一个结论:互联网正在快速迅猛地向移动终端发展,这样对于网页就有了一个Anywhere的需求。其实网页的Anywhere就是响应式Web设计,说的再白一点,就是为了省时省力省钱,一次开发出来的网页,用一个URL,可以在不同终端设备上有不同的呈现方式。下面四张图就是一张网站所作的响应式设计。    OK!概念就是这样的,本人一直以屌丝自居,所以这个定义也多少带着点屌丝的意味,娱乐一下。。。呀,有点冷,不闹了,下面我们看看这种多种终端设备要求网页不同呈现方式的需求下,都做过哪些尝试呢? 网页代码的单纯转换:为了让用户在手机这种移动设备上一样可以访问我们PC端网页,我们最初的响应式Web设计的尝试就是开发同学单纯的把PC端网页的源代码直接转换成WAP对应的代码。 使用一些建站工具快速地搭建移动WAP网站。 针对不同的终端设备开发不同的版本,最常见的就是PC版本 + 移动版本,事实上我现在的工作很大程度上还是停留在这个层次上,在给一家著名的电商网站定制开发其对应的移动版本。其实这种定制化开发从开发、设计、更新、维护各个过程来说,工作量还是挺大的