莆田网站建立网络公司电话:400-053-6665永利网址
永利网址
永利网址
www.66402.com
www.66402.com 建站学院

自适应网页设想的要领

跟着愈来愈多的人运用手机上网,使自适应网页设想手艺变得愈来愈盛行。自适应网页设想指能使网页自适应显现在差别巨细终端设备上新网页设想体式格局及手艺。固然,对一个新手来讲能够听起来有点庞大,实在它比你想象的简朴多了(条件您有css根蒂根基)。

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

在网站HTML文件的开头,增添viewport meta标签通知浏览器视心宽度即是装备屏幕宽度,且不停止初始缩放。代码以下:

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

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

IE8及其更低版本不支持media query,能够运用 media-queries.js或 respond.js剧本实现支撑。

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

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;便可处理这个问题。

【返回】