学做网站培训课程介绍

当前位置:

wordpress如何制作自适应网页

什么是自适应网页

由于智能手机的普通,上网的终端设备已不局限于PC电脑了,有手机,平板,笔记本等等。宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上,有的还达到了2000像素。

z如何制作自适应网页

一个网站上的网页如何在不同大小的设备上呈现同样的网页而不错位,特别是企业网站,就需要制作自适应网页。

wordpress自适应网页制作步骤

wordpress自适应网页在制作中与我们普通的网页制作相差不大,只不过在制作自适应网页时,需要在普通网页中加下以下一些属性:

1、在wordpress头部模板中,加入一行viewport元标签。

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

代码解释:viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

2、由于网页会根据屏幕宽度调整布局,所以不能使用从不宽度的布局,也不能使用具有从不宽度的元素。对图像来说也是这样。

具体说,CSS代码不能指定图片为固定宽度而是应该使用“百分比”来指定图片的宽度。

img{width: 90%;}

3、网页上的文字的字体也不能使用从不大小(px),而只能使用相对大小(em)。例如:

body {font: normal 100% Helvetica, Arial,sans-serif;}

代码解释:上面的代码指定,字体大小是页面默认大小的100%,即16像素。

4、流动布局(fluid grid):各个区块的位置都是浮动的,不是固定不变的。float浮动的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

.main {float: right;width: 70%; }

.leftBar {float: left;width: 25%;}

5、"自适应网页制作"的核心,就是CSS3引入的MediaQuery模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />

代码解释:如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />

代码解释:如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

更多网页制作知识,请学习html视频教程

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (110997 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发,自己比较喜欢。注意:此模板不支持IE6,
  • 用什么建网站?Wordpress建网站好不好?这些问题经常被新手问上问起。可以这样说,wordpress程序可以建各种类型的网站,它的功能强大之处令人称赞,
  • Wordpress 如何开启伪静态 视频教程 (1119970 次浏览)
    做网站制作好之后,如果网站做SEO优化时,需要进行伪静态的设置,同样也可以通过网站设置选置进行设置。Wordpress伪静态设置方法 登陆到wordpr
  • 什么是自适应手机网站 视频教程 (1103189 次浏览)
    以下为学做网站论坛关于“什么是自适应手机网站”讲解视频教程。
  • 老师你好,我前几天一直在学习手机站课程,对于课程中的案例网站特别喜欢,自己就跟着课程一步步做了一遍。也做了课程笔记,感觉学到了很多知识。
  • 什么是自适应网页由于智能手机的普通,上网的终端设备已不局限于PC电脑了,有手机,平板,笔记本等等。宽度通常在600像素以下;PC的屏幕宽度,一
  • 网页如何添加背景音乐 视频教程附件下载 (1116769 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 网页如何添加视频动画 视频教程 (1107200 次浏览)
    在网站制作过程中,特别是学习视频网站制作教程时,是需要给网站中添加很多的视频的,对于网站如何添加视频有二种方法:一种是添加自己网站的视频,另