青岛网站建设公司,青岛网站制作公司-奈薇建站网
建站咨询热线:0532-8878113113165158935 
知识普及 » 网页自适应设计让你轻松搞定

网页自适应设计让你轻松搞定

奈薇网站建设 2014-12-17 14:13发表
阅读次数 1912
  可以说在现在青岛网站设计中自适应网页设计,如今非常的新颖潮流,这种设计可以根据用户的窗口大小,进行不同的改变。而且在规定的范围内可以提供稳定的视觉体验。但是也有弊端,就是不适应老旧或者不标准的浏览器,就会导致兼容性差。下面我就详细的讲解:

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

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

  @mediascreenand(max-device-width:480px){

  #divMain{

  float:none;

  width:auto;

  }

  #divSidebar{

  display:none;

  }

  }

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

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

  <metaname="viewport"content="width=device-width,initial-scale=1"/>

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

  3、页面使用相对字体

  在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),两者换算关系是:em=px/16,例如16px就等于1em。

  根据上面讲述的几点内容,我针对我博客的CSS进行了一些修改,发现可以从iPhone手机浏览到体验更佳的页面,但有一个问题没有解决,就是顶部导航栏navbar显示有问题,换行后被下面的文章盖住了,不知道怎样能更好地解决这个问题。

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

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

  总结,你可以根据上面的四个步骤进行修改学习,你会觉得很简单就学会了将一个网站修改成了自适应的网页效果,可以说大大提高了手机用户的体验。同时也对青岛网站建设增加了一份力量。

网页自适应设计让你轻松搞定相关标签:制作网站设计网页网站制作方案网站建造
相关热点推荐
关于iOS7的设计方面
网页设计中排版与布局基
手机网站的SEO优化该
网站设计的思考之网站的
青岛网站建设基础知识
网站流量语汇 增加网站
青岛网站制作的公司哪家
极简主义网站设计:寓丰
网站改版有了新的方法?
网页设计配色应用实例剖
浅谈企业网站建设的黄金
影响青岛网站建设排名的
青岛高端定制网站价格
浅谈如何提高网站PR值
网页设计中“点”的视觉
让设计散发文化韵味
视觉设计在网站制作上的
网页布局设计:注册登录
CSS选择符详解
从精简导航谈小型网站的
网页布局设计基础
你对网站的未来是怎么样
论个人站长之出路
什么是最好的正文字体
网页的栅格系统设计
网页顶尖设计师的思考与
网站改版内容
改变首页需要慎重考虑
页面空白空间的魅力
做网站一定要知道的定律
企业建网站的必要性
网站建设中的版面设计
网站怎么才能让goog
真正成功的关键IP是坚
一个好的网站应具备哪几
花卉行业网站建设
站在用户的角度来设计网
中小企业行之有效的网络
什么样的网站效果才是客
企业建立网站的最佳时机
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

热点地区:青岛网站建设价格 青岛即墨网站制作公司 开发区信息港 山东在线门户
  • 备案号
  • 鲁ICP备13010283号
建站咨询热线0532-88781131 15166683288 13963906391
版权所有© BangJianZhan.Com & Nev.Cn 青岛网站建设/网站制作公司
青岛雨后网络科技有限公司 - 青岛市市北区福州北路90号,景泰尚都6层
已经为您服务了
160个月 11