1. 首页
  2. 网页设计
  3. 正文

怎么做自适应网页?

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

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


    延伸阅读

  • 怎么做自适应网页?

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

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.lnbdc.com/article/6757.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();