学做网站培训课程介绍

当前位置:

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

什么是自适应网页?

自适应网页是指网页根据用户浏览设备的头信息,自动变换网页的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图标,点击即出现导航栏。

发表评论

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

相关教程

  • Dreamweaver是一款常用的网站创建工具,下面介绍一下Dreamweaver建网站的方法与步骤。学会Dreamweaver的使用对于我们自己建网站有很大帮助。下载安
  • 下载一个dedecms网站系统:鉴于有部分人不会如何下载dedecms这个系统,可以在怎么做网站教程里有提供下载;购买一个网站空间:所谓的网站空间,就是
  • 怎么用网站模板建网站 (14127 次浏览)
    网站模板建网站是一种相对简单的建站方式,可以通过安装网站模板来快速搭建一个网站。对于一些想快速搭建网站的人来说,网站模板建网站是一种非常不错
  • 繁体字网站怎么制作 (14200 次浏览)
    繁体字 网站是一种网站字体全部为繁体字的类型网站,它的制作方法与我们普通网站制作是类似的。但需要我们单独安装繁体字字体包。下面学建站网介绍一
  • 怎么做多语种网站 (14143 次浏览)
    多语种网站是指用一个域名,做好几种语言的网站。下面介绍一下多语种网站制作方法与步骤。方法/步骤1本地网站语种为英语,增加一个西语的二级目录
  • 怎么自己做一个商城网站,下面介绍一下商城网站建设步骤1.应用自助搭建工具想不敲代码.不做设计,简单的方法就是通过自助搭建工具来实现商城网站建
  • 如何创建一个企业网站 (14257 次浏览)
    企业网站是比较多的网站类型,它是企业在互联网宣传的平台,那么如何创建一个企业网站呢?其实步骤都是差不多的。下面介绍一下创建一个企业网站的步
  • 新手学习网站建设需要有以下基本的条件:电脑熟练操作,使用电脑最好在一年以上;会打字,懂基本电脑知识;基本的电脑软件会使用;新手学习网站
  • 现在很多人想做外贸英文网站,那么怎么做英文网站呢?制作英文网站建议使用WordPress程序。WordPress制作英文网站只需三步就可以完成。第一步:下载W
  • 家教网站不同于其他企业网站,家教网站的最大特点是体现正规、服务特色、服务案例,所以在家教网站制作的过程,要着重注意网站首页的排版和结构。下