前言：寻找写作灵感？中文期刊网用心挑选的自适应网页设计问题浅析，希望能为您的阅读和创作带来灵感，欢迎大家阅读并分享。
1自适应网页的重要性
这几年随着移动设备的不断普及，使用手机和平板电脑观看网页的几率大增，因此，网页从简单的HTML进化到必须符合各种分辨率的屏幕，这是一个不可避免的趋势。目前开发针对于移动设备的APP非常流行，各大网站都有其相应的APP。但是在学习编写APP的时候，我感觉到有几个问题值得探讨。第一，现在最流行的手机操作平台有两个：Android和IOS，其编程难度都不低；第二，与网站可以直接浏览不同，使用者必须另外下载APP。当然另外写一个APP可以提供更具有针对性的服务，但是提供一个手机浏览器可以浏览的版本也是必要的。
2使用React.JS开发自适应网站
对于开发自适应网站而言，在现在发达的开源社区中，我们有很多可以使用的好东西。Bootstrap3和React.JS就是其中的佼佼者。Bootstrap是一个前端的Framework，可以使我们节省很多花费在编写CSS身上的时间。作为设计自适应网站的重点，CSS具有比较容易的会有硬件加速等的优化；另外，为了提高效率，能用CSS做到的，就尽量不要用JavaScript来实现。React.JS(以下简称React)，是Facebook底下的开源项目，Instagram就是使用React开发的。React是个JS框架，同时也是个新的网页开发概念。随着这几年来的蓬勃发展，一直不断推陈出新，甚至可以用来开发iOSApp。React让网页开发变成一种简单的概念。和以往使用JQuery或是其他的套件有很大不同的是，React把网页中的元素当成一个一个的“组件”，先定义“组件”，再将“组件”塞进网页中。这样的做法有几个好处：第一、我们可以重复使用相同的组件，却只要定义一遍；第二、我们可以享有React提供的渲染优化。所谓的渲染优化，就是React对于网页内容呈现的处理方式加以优化的算法。在呈现一个新网页之前，React会先将新旧网页的内容加以比较，找出两者相异之处后，再以修改旧网页的文件对象的方式达成新网页的呈现。相较于传统浏览器整个重新剖析计算新网页，React可以让浏览器呈现网页的效率大为增进。使用React，网页分成了“组件”和“数据”，只要管理数据，让React来负责渲染。这样的作法，我们可以很容易地开发出一个纯AJAX网站，让网页加载后，便不再需要重新整理，全部使用JS去抓“数据”。还有一个好处就是不用再为处理这些数据而伤透脑筋，只要将数据放进该放的地方就好。使用React的数据流写前端的时候，我们只要考虑整体，而不用考虑细节。而分工从一般网页设计上的功能性分工，变成“组件”各自处理自己的部分，而“组件”中还可以迁入其他组件，形成一个数据流。
3开发中遇到的问题
3.1旧版IE浏览器
因为IE老旧，而有些地方又常常指定使用旧版IE(如IE8)，导致目前还有大量旧版IE使用者。IE11是一款可支持HTML5标准的浏览器，所以我选择支持。当然，我们还是必须另外写一些程序代码让网页支持IE11。使用最新的浏览器，我们可以使用最新的标准来编写网站，而不用迁就旧版IE浏览器，套件也可以用最新版。最新版往往功能较多或是效率较高，如JQuery2.X以后版本不支持旧版IE。
3.2不同的浏览器
每个浏览器的行为和支持的JS、CSS方法不同，撰写自适应网站一定要用各种浏览器测试，不然就会出现意外的状况。如果不想使用太多浏览器，除了Chrome外，至少还要再使用FireFox，因为FireFox是一款非常遵守HTML5标准的浏览器。
3.3不同的屏幕大小
这是一个基本的问题，不同屏幕大小会影响你的网页浏览模式，有些时候不是调整一下DIV宽度就可以解决的。诸如此类还有一些按钮、表格等，如果可以的话，一开始就设计一个可大可小的显示方法，不然的话，就必须针对不同的大小，提供不同的网页设计。手机优先是现在的主流，设计样式时以小屏幕设计常常可以得到比较好的效果。
3.4操作的模式和JS事件
手机上的触控，是不适用鼠标事件的，而是另外定义一个“触控事件”，还有手机上不容易触发Hover事件，有些因为手机屏幕小，很难进行精准的点击。根据上述原因，设计自适应网页给手机使用者使用时，一定要注意按钮的大小不能太小，也不要在网页上放太多Hover的事件，如果有用到mousedown、mouseover等鼠标事件，也一定要注意另外定义touchstart、touchmove事件。
3.5不要使用外挂功能，如Flash
这里的外挂指标准（HTML/CSS/JS）之外的网页外挂工具，像是Flash，因为手机版浏览器可能不支持这些外挂，很难跨平台。现在的Android已经预设不使用Flash了，HTML5标准中也有很多更好用、效率更高的对象能够取代Flash，现在我们有更好的选择，使用大量外挂开发网页的时代已经过去了。
3.6网页加载速度
其实这个问题不只在自适应网站上会有，一般网站也该注意。使用了很多套件、自适应的CSS档案，我们的网页常常会很肥大，尤其是移动设备常常不会有良好的网络环境，浏览网站一次可能就要加载好几秒甚至几分钟。尽量不要加载不必要的CSS、JS，然后启用压缩功能，把空白和换行压缩掉，并用gzip压缩，大概可以让整个网页变成原本的20%甚至更小。
4结语
以上就是开发自适应网站时遇到的几个问题，使用经过测试的套件，尽量使用HTML5标准中的方法，多加测试，就可以轻松开发跨平台的网页了。但是最重要的还是要多了解现在的趋势，多和人讨论，从不同的角度切入，比如设计师的角度、使用者的角度、管理者的角度，才能契合所有人的需求。
作者：王佳 单位：天津电子信息职业技术学院