网站制作价格网站制作流程

什么是自适应网站有哪些优点,自适应网站如何设计

作者:潍坊网站开发   发布时间:2019-1-2

     随着互联网的发展智能手机以及ipad等设备的广泛使用与普及,网站的风格也出现了各种样式,尤其近几年用户的在移动端的搜索量已经远远大于PC端计算机,所以手机端自然也就收到了大家的关注,于是出现了自适应类型的网站,那什么是自适应网站有哪些优点,自适应网站如何设计

  今天曙光互联来为大家科普下什么是自适应网站有哪些优点,自适应网站如何设计

  什么是自适应网站呢?

  说起自适应网站,很多人第一时间的反应是:“自适应网站具有丰富的展示方式”、“自适应网站的功能真不少”、“自适应网站可以自动调节不同屏幕大小分辨率的设备”、“自适应网站更易于优化”等等的一些观念。没错,自适应网站的确可以处理掉许多传统网站无法完成的功能,并且具有更多的新元素与新特性。

未标题-1.

  自适应网站又叫响应式网站,所谓自适应网站,就是能根据不同设备的屏幕大小而自动选择最佳的分辨率、布局来展示网站。例如中扬科技新推出的自适应网站模板,能做到一个网站在多种不同尺寸的设备上适配显示,不需要另外设计适合其他终端显示的网站,实现自适应网站建设。 推荐关注(如何设计一个营销型网站)

  自适应网站有哪些优点呢?

  用户体验好:页面丰富简洁,能实现各种震撼眼球的网站视觉效果;自适应网站不仅可以适合各种设备,同时也节省了维护的时间,只需要一个后台更新就可以了,很是方便。

  节约成本:自适应网站能节省成本和时间,从设计的角度来说只需要设计一套图即可,电脑端、手机端、pad端一套图就能用。

  利于网站优化:自适应网站不同终端友好的展示效果,用户可以与网站一直保持联系,比如URL不积累,只需要同意一个域名就能访问各种终端。

41PZKG}RC~CZ(]49IM`37GT.

  自适应网站如何设计呢?

  1、在HTML头部增加viewport标签。

  在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:

  复制代码

  代码如下:

  这段代码支持Chrome、Firefox、IE9以上的浏览器,但不支持IE8以及低于IE8的浏览器。

  2、在CSS文件尾部增加针对不同屏幕分辨率的规则。

  例如使用如下的代码,可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog,WordPress相关标签名称只需修改一下即可。

  复制代码

  代码如下:

  @media screen and (max-device-width: 480px) {

  #pMain{

  float: none;

  width:auto;

  }

  #pSidebar {

  display:none;

  }

  }

  3、布局宽度使用相对宽度。

  网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度,那就需要在 @media screen and (max-device-width: 480px) 里面增加各个p的针对小屏幕的宽度,实际上更麻烦。 推荐阅读(网站打开速度过慢怎么办)

 

  4、页面使用相对字体

  在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),对于大多数浏览器来说,通常用 em = px/16 换算,例如16px就等于1em。

  手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。

  很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

上一篇: 没有了
下一篇: 什么是网站优化过度怎么办,如何避免网站优化过度