鸡西信息港

当前位置: 首页 >历史

自适应网页设计的方法

来源: 作者: 2019-04-11 07:39:54

昨天中午Google进行了一次讲座,讲述自适应页设计的概念和方法,维护同一个页代码,即可使站在多种浏览设备(从桌面电脑显示器到智能或其他移动产品设备)上具有更好的阅读体验,这里我将该讲座内容简要的整理一下。

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

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

meta name= viewport content= width=device-width, initial-scale=1 /

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

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

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

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

#divMain{

float: none;

width:auto;

}

#divSidebar {

display:none;

}

}

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

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

4、页面使用相对字体(非必要)

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

5、图片自适应(非必要)

img标签的话,只需要设置 max-width: 100%;或width:100%; 语句为:img { max-width: 98%; }

css加载的background-image如何自适应大小呢,其实CSS3中是可以实现的,添加如下语句:background-size:100% 100%;

根据上面讲述的几点内容,我针对我博客的CSS进行了一些修改,发现可以从iPhone浏览到体验更佳的页面,但有一个问题没有解决,就是顶部导航栏navbar显示有问题,换行后被下面的文章盖住了,不知道怎样能更好地解决这个问题(更新:经过友提示,在导航栏divNavbar的样式里,加入white-space:nowrap; overflow:hidden; 即可解决这个问题)。

下图是使用iPhone访问的,经过修改CSS为自适应页后的月光博客首页页面,看起来比原始的未优化页面好多了吧。

总之,根据上面四步进行修改的话,可以很简单地将一个站修改为适合多种设备浏览的页面,这对于通过访问站的用户来说,的确是一件好事。

,分享一下Google关于自适应页设计的讲座的视频地址,观看请点这里。

呃,关于字体单位em的说法不太准确,你也说了这是相对字体,如果它总是固定等于16px,那怎么可能还叫相对字体?

这个em是一个相对的单位,1em=一个字的大小,比如首行缩进两个字符就是用“text-indent:2em;”这样的写法。之所以经常说1em=16px,是因为绝大多数浏览器默认情况下1em=16px,而如果你自行设置了样式改变了字体大小,相对字体大小的单位em也会随之变化。

而且em能够继承,也就是说父元素设置了font-size:16px,子元素设置font-size:0.9em,那么子元素字体大小就是16*0.9=14px;然后子元素的子元素再设置个font-size:0.9em,那子元素的子元素的字体大小就是14*0.9px。williamlong 于 23:54:49 回复是的,我这里描述的不太准确,讲师也没讲清楚。

2013/12/8 23:48:11 支持(9)反对(11) 回复

请老大帮我看看,我用的是wordpress的主题Prower,也是自适应的,一开始什么都正常,但是到了上个星期,突然发现浏览变成了一个缩微版的页,必须进行放大才能看清文字。我也不知道是不是我的代码哪里被改动了?

请老大们帮着看看,我的

址:(我不是故意要发链接的,实在是不知道该怎么办,月光老大就饶了我这次吧……)田原 于 15:24:31 回复已经可以了,按照月光大大的说法,在HTML头部增加viewport标签就解决问题了数码批发供应

谢谢月光大大!

2013/12/9 12:15:23 支持(8)反对(13) 回复

只能适应移动端,web端不可以么?做了一个例子,web不可以松花石

代码如下:

html

head

meta http-equiv= Content-Type content= text/html; charset=utf-8 /

title css /title

meta name= keywords content=

meta name= description content=

meta name= viewport content= width=device-width, initial-scale=1 /

style

div{

border:1px solid black;

background-color:pink;

float:left;

}

.test{

font-size:2em;

width:800px;

height:20%;

}

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

.test{

float: none;

width:auto;

}

}

/style

script

/script

/head

body

div >你好吗。hello word

/div

/body

/html

2014/7/16 15:30:41 支持(7)反对(14) 回复

(*)

验证(*)

相关推荐