这些年来随着手机移动设备的不断普及, 使用手机和平板电脑观看网页的几率大增, 因此, 网页从简单的HTML进化到必须符合各种分辨率的屏幕, 这是一个不可避免的趋势。这时候就出现了自适应网页的这种需求,如果你对于自适应的知识不是很了解,那么就应该看看这篇内容或许对你有很大的帮助。
目前开发针对于移动设备的APP非常流行, 各大网站都有其相应的APP。但是在学习编写APP的时候, 我感觉到有几个问题值得探讨。第一, 现在最流行的手机操作平台有两个:Android和IOS, 其编程难度都不低;第二, 与网站可以直接浏览不同, 使用者必须另外下载APP。当然另外写一个APP可以提供更具有针对性的服务, 但是提供一个手机浏览器可以浏览的版本也是必要的。
1、使用React.JS开发自适应网站
对于开发自适应网站而言, 在现在发达的开源社区中, 我们有很多可以使用的好东西。Bootstrap3和React.JS就是其中的佼佼者。
Bootstrap是一个前端的Framework, 可以使我们节省很多花费在编写CSS身上的时间。作为设计自适应网站的重点, CSS具有比较容易的会有硬件加速等的优化;另外, 为了提高效率, 能用CSS做到的, 就尽量不要用Java Script来实现。
React.JS (以下简称React) , 是Facebook底下的开源项目, Instagram就是使用React开发的。React是个JS框架, 同时也是个新的网页开发概念。随着这几年来的蓬勃发展, 一直不断推陈出新, 甚至可以用来开发iosApp。
React让网页开发变成一种简单的概念。和以往使用JQuery或是其他的套件有很大不同的是, React把网页中的元素当成一个一个的“组件”, 先定义“组件”, 再将“组件”塞进网页中。这样的做法有几个好处:第一、我们可以重复使用相同的组件, 却只要定义一遍;第二、我们可以享有React提供的渲染优化。所谓的渲染优化, 就是React对于网页内容呈现的处理方式加以优化的算法。在呈现一个新网页之前, React会先将新旧网页的内容加以比较, 找出两者相异之处后, 再以修改旧网页的文件对象的方式达成新网页的呈现。相较于传统浏览器整个重新剖析计算新网页, React可以让浏览器呈现网页的效率大为增进。
使用React, 网页分成了“组件”和“数据”, 只要管理数据, 让React来负责渲染。这样的作法, 我们可以很容易地开发出一个纯AJAX网站, 让网页加载后, 便不再需要重新整理, 全部使用JS去抓“数据”。
还有一个好处就是不用再为处理这些数据而伤透脑筋, 只要将数据放进该放的地方就好。使用React的数据流写前端的时候, 我们只要考虑整体, 而不用考虑细节。
而分工从一般网页设计上的功能性分工, 变成“组件”各自处理自己的部分, 而“组件”中还可以迁入其他组件, 形成一个数据流。
自适应网站能够给用户带来更好的浏览体验,网站建设需要考虑页面布局。当然自适应设计目前价格相对比较高,如果网站的要求的版面相对比较复杂的话,消耗的时间会比较长,比较适合单栏或双栏等简单版面网站。