学做网站培训课程介绍

当前位置:

自适应网页怎么做?自适应网页制作方法

什么是自适应网页?

自适应网页是指网页根据用户浏览设备的头信息,自动变换网页的CSS参数,达到网不同浏览设置显示不同的网页版面的效果。自适应网页的原因就是使用CSS3中的@media属性来判断变换的。

怎么做自适应网页?

在实际网页制作过程中,我们怎么制作自适应网页呢?下面学做网站论坛介绍一下自适应网页制作方法。

第一步:在网页头信息中添加meta参数;


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

这个meta参数可以告诉浏览器网页的初始大小,以及缩放比例。这也是制作自适应网页必需的META信息。

第二步:添加@media信息;

@media是CSS3推出的一个新特性,它能识别各种设备,通常类型值设为screen。通过@media可以定义不同宽高下的样式,比如当页面宽度小于800px之间时主体部分背景色变为蓝色。


@media screen and (max-width: 800px) {
main {
background-color:blue;
}
}

第三步:在@media中填写不同的CSS样式,并且替换元素。

如导航栏,页面缩小时,导航栏项不可以减少,字体大小改变也会导致无法看清等问题,这些将其替换成icon图标,点击即出现导航栏。

发表评论

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

相关教程

  • 如果你的网站想拓展国外用户,让国外用户更轻松的浏览,很好的办法就是将自己的中文网站转成多语言文网站。这样网站前台就会有语言切换按钮,不同国家
  • 什么是发卡网站发卡网站是一种通过网络在线发送卡密的网站类型,用户通过在网站上购买后,获得的卡密就会显示在自己的会员中心里。实现无人销售的自
  • 我们经常看到有一些网站,可以允许用户在线答题,或者是在线模拟考试。当用户答完所有题目之后,还会自动计算得分。那么在自己做网站时,这样的在线考
  • 汽车配件网站是一种用于展示汽车零配件的网站,在制作汽车配件网站时,要贴合汽车配件主题,网站首页设计分为轮播展示图、配件展示版块、公司简介版块
  • 教育机构网站是一种针对于教育行业的网站类型,教育网站采用DIV+CSS布局,宽屏设计。教育网站页面一般包括学院首页、教师风采、课程介绍、推荐阅读、
  • 优惠券网站是指可以提供各类优惠券的网站类型,很多人都想知道怎么制作一个属于自己的优惠券网站。在这里给大家讲解优惠券网站怎么做的流程。方法/
  • 在线音乐网站是一种以音乐为主题的网站类型,支持在线听歌,在线上传音乐等功能,并且可以满足音乐、DJ、音乐分享、原创音乐、音乐资讯站等使用。下面
  • 漫画连载网站是针对于漫画爱好者的一种网站类型,内容主要以漫画连载为主,通过采集API可以自动采集大量的漫画。网站版面如下:漫画连载网站制作
  • 什么是问卷调查投票网站问卷调查投票网站是指用户通过填写在线表单,填写相关的数据或者在线投票,然后提交后,管理员可以在后台查看提交的表单,达
  • 本节课程将带领大家学习一下如何去进行手机网站仿站,请大家掌握WAP手机站仿站方法。想学习手机网站仿站课程的同学,可以报名学做网站论坛建站课程,