专注网站建设行业优质供应商!
咨询电话:0535-6676670    24小时服务热线:18660077704
NEWS CENTER ·
新闻中心
关注不知火 关注前沿

烟台网站建设关于动态网页自适应问题解答

这几年随着移动设备的不断普及, 使用手机和平板电脑观看网页的几率大增, 因此, 网页从简单的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框架, 同时也是个新的网页开发概念。随着这几年来的蓬勃发展, 一直不断推陈出新, 甚至可以用来开发i OSApp。
React让网页开发变成一种简单的概念。和以往使用JQuery或是其他的套件有很大不同的是, React把网页中的元素当成一个一个的“组件”, 先定义“组件”, 再将“组件”塞进网页中。这样的做法有几个好处:第一、我们可以重复使用相同的组件, 却只要定义一遍;第二、我们可以享有React提供的渲染优化。所谓的渲染优化, 就是React对于网页内容呈现的处理方式加以优化的算法。在呈现一个新网页之前, React会先将新旧网页的内容加以比较, 找出两者相异之处后, 再以修改旧网页的文件对象的方式达成新网页的呈现。相较于传统浏览器整个重新剖析计算新网页, React可以让浏览器呈现网页的效率大为增进。
使用React, 网页分成了“组件”和“数据”, 只要管理数据, 让React来负责渲染。这样的作法, 我们可以很容易地开发出一个纯AJAX网站, 让网页加载后, 便不再需要重新整理, 全部使用JS去抓“数据”。还有一个好处就是不用再为处理这些数据而伤透脑筋, 只要将数据放进该放的地方就好。使用React的数据流写前端的时候, 我们只要考虑整体, 而不用考虑细节。而分工从一般网页设计上的功能性分工, 变成“组件”各自处理自己的部分, 而“组件”中还可以迁入其他组件, 形成一个数据流。
2、开发中遇到的问题
3.1 旧版IE浏览器
因为IE老旧, 而有些地方又常常指定使用旧版IE (如IE8) , 导致目前还有大量旧版IE使用者。
IE11是一款可支持HTML5标准的浏览器, 所以我选择支持。当然, 我们还是必须另外写一些程序代码让网页支持IE11。
使用最新的浏览器, 我们可以使用最新的标准来编写网站, 而不用迁就旧版IE浏览器, 套件也可以用最新版。最新版往往功能较多或是效率较高, 如JQuery 2.X以后版本不支持旧版IE。
3.2 不同的浏览器
每个浏览器的行为和支持的JS、CSS方法不同, 撰写自适应网站一定要用各种浏览器测试, 不然就会出现意外的状况。如果不想使用太多浏览器, 除了Chrome外, 至少还要再使用Fire Fox, 因为Fire Fox是一款非常遵守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%甚至更小。

点击次数:  更新时间:2019-03-20
相关新闻
  • SEO培训到底值不值的参加
  • 相比较起电视广告,视频广告的费用和百度竞价的费用而言,SEO可以说是一种成本最低,短时间内见效的高性价比营销方式,它的使用已经给越来越多的企业带来了不可估量的回报。
  • 网站维护优质网站内容如何编辑
  • 众所周知,在互联网这个大环境下,网站更新换代已经不什么稀奇事了,最后没被淘汰的网站都有着优质的内容资源。所以不管互联网如何变化,内容永远是最重要的。网络在发展,网站内容要要跟着标准与时俱进,应该符合以下三个方面的要求。
  • 企业进行网站建设需要掌握的几点要素
  • 企业要建设网站的时候首先就要建立一个域名,这是要进行网络营销的一个基本前提,这是企业的一个非常重要的网络商标且唯一,这样企业在进行网络营销时网络商标就起到了一个企业标识的作用,命名域名的时候,就要讲域名和企业名称相结合,相统一。好的域名是简洁的,因为字符太长用户会产生疑惑,记忆记不住。所以说好的域名是对企业网络品牌形成以及树立品牌形象的关键。
  • 烟台微信小程序-如何正确使用meta标签呢..
  • 烟台微信小程序怎样正确运用meta标签呢?相信我们都知道网站的标题、关键词、摘要这些。是一个网站做搜索引擎优化必须设置的。这些站长们都不会生疏,而标题关键词摘要都是在meta标签里的。下面介绍一下关于meta标签的运用。由于meta标签是给搜索引擎看的一些隐含信息。
  • 网站优化怎么做 如何做好内部和外部优化
  • 当今社会,网站建设成为目前最先进的互联网名词,随着传统的网站日渐更新,新型的网站建设进入到了新的营销模式中,在网站建设的时候,我们不仅仅要追求网站的外观展示,更要注重网站的实际意义和宣传效果,那么如何做好网站优化呢?小编今天就带大家来看下。
  • contact us

    0535-6676670

    • 电话:0535-6676670
    • 传真:0535-6676670
    • 手机:18660077704
    • 网址:www.21-mars.cn
    • 地址:山东省烟台市芝罘区西盛街28号第一大道14楼

    CopyrightBuZhiHuo technology Co., LTD. All Rights Reserved.    

    鲁ICP备17016111号-3

    • qq客服
    • 公众号
    • 手机版
  • 不知火客服