591区块链
精品区块链学习网

自适应网页设计的概念和方法

​Google停止了一次在线讲座,报告自顺应网页设计的观点和办法,保护同一个网页代码,便可以使网站在多种浏览装备(从桌面电脑表现器到智能手机或其余挪动产物装备)上具备更好的浏览体验,将该讲座内容简要的收拾如下:

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

在网站HTML文件的开首,增长viewport meta标签奉告浏览器视口宽度即是装备屏幕宽度,且不停止初始缩放。代码如下:

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

2、在CSS文件尾部增长针对分歧屏幕分辨率的规矩。

比方应用如下的代码,能够让屏幕宽度低于480像素的装备(如iPhone等),网页侧栏暗藏中部内容栏宽度主动调理。如下代码针对Z-Blog,WordPress相干标签称号只要改动一下便可。

  3、结构宽度应用相对宽度。

网页整体框架能够应用相对宽度,但往下的内容框架、侧栏等最佳应用相对宽度,如许针对分歧分辨率停止改动就便利。固然也能够不消相对宽度,那就 需要在  @media screen and (max-device-width: 480px) 外面增长各个div的针对小屏幕的宽度,实际上更费事。

4、页面应用相对字体

在HTML页面上不要应用相对字体(px),而要应用相对字体(em),对付大多数浏览器来讲,通常用 em = px/16  换算,比方16px就即是1em。

依据下面报告的几点内容,我针对我博客的CSS停止了一些改动,发明能够从iPhone手机浏览到体验更佳的页面,但有一个成绩没有办理,便是 顶部导航栏navbar表现有成绩,换行后被下面的文章盖住了,不知道如何能更好地办理这个成绩(更新:颠末网友提醒,在导航栏divNavbar的款式 里,参加  overflow:hidden; 一行便可办理这个成绩)。

未经允许不得转载:591区块链学习网 » 自适应网页设计的概念和方法

-------------------------------------------------------------------------------
591区块链学习网优质区块链空投糖果汇总 http://t.cn/R3ijkYS
加入空投糖果QQ群 124288406
分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

591区块链学习网-精品区块链学习网

联系我们优质糖果

© 2018 591区块链学习网   渝ICP备11000665号-4 点击这里给我发消息
还是那句话注册了,每天只要花5分钟,我们就能搭上区块链一起赚钱。 注册了不一定赚,但是没注册没推广肯定一毛钱都赚不到。由于都是正规平台,所以能实名就实名!活动我都甄别筛选过的,没有安全隐患。

QQ在线咨询
学习网咨询
295371199
学习网交流群
130992881