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

　　第一步：在网页头信息中添加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图标，点击即出现导航栏。

延伸阅读

• 自适应网页制作注意事项和报价主要影响

  为了节省网页制作费用，很多企业现在会选择自适应网页制作，因为这种网页能够在多个终端完美呈现，不用耗费时间做多个终端企业网站，现在移动互联网发展迅速，大部分企业流量都是来自于移动...

• 自适应网页设计的用法（自适应网页模板）

  1.什么是自适应网页设计自适应网页设计是一种用于创建网站和应用程序的技术，它可使网站根据用户的设备和屏幕大小自适应地显示，无论是在台式机、笔记本电脑、平板电脑还是手机上，都可以...

• 怎么做自适应网页？

  在实际网页制作过程中，我们怎么制作自适应网页呢?下面学做网站论坛介绍一下自适应网页制作方法。第一步：在网页头信息中添加meta参数;<metacontent=width=...