html+css如何实现手机端网页自适应

这篇文章主要介绍html+css如何实现手机端网页自适应，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联专注于江源企业网站建设,响应式网站设计,商城系统网站开发。江源网站建设公司,为江源等地区提供建站服务。全流程专业公司，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

一，最近在做项目，写移动端的网页，主要是自适应的问题。bootstrap等前端框架用的不好，又不想耽误时间，不能自适应很烦人，这里给大家介绍下我的方法，

也是结合了很多人的思路。

1.在头部加入这样的一行代码：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

这句话是自动设置缩放，然而，它并不能完全适应所有的手机，并且你在用浏览器手机模式调试的时候可能正常，但是换到真实的手机端其实是不正常的。所以我们还要进行改动。

2.这里推荐大家在用magin,padding,font-size,等属性的时候用rem替代px，你可能对rem比较陌生，这里我提供好了一段js代码，直接引入即可，不需要纠结rem是怎么回事，关于原理，我再写篇博客做介绍，这篇博客讲怎么使用。就是以下的这段js代码，再写网页的时候放入html中即可。下面代码中的640指的是手机的屏幕宽度，一般来讲市面上的手机屏幕的宽度最大是640px，所以这里用i=640指代屏幕的最大宽度，最小是320px，然后通过引用下面的js你就可以书写自己的网页了，要记得本js的1rem=100px哦，其实是为了好换算，比如font_size:14px;我们就可以写成，font_size:0.14rem。

<script>
!function(n) {
    var e = n.document,
    t = e.documentElement,
    i = 640,
    d = i / 100,
    o = "orientationchange" in n ? "orientationchange": "resize",
    a = function() {
        var n = t.clientWidth || 320;
        n > 640 && (n = 640),
        t.style.fontSize = n / d + "px"
    };
    e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
} (window);
</script>

3.好了，接下来为大家展示一个轮播图效果来说明一下，先上代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>无标题文档</title>
<script src="images/jquery-1.js"></script>
<script src="images/TouchSlide.js"></script>
<script src="images/rem.js"></script>
<style>
    /* banner 轮播切换 star */
body{margin:0 auto !important;max-width:640px;min-width:320px;background: #fff !important;overflow-x: hidden;}
#banner{position: relative;}
#banner .hd{position: absolute;width: 100%;text-align: center;bottom: 2%;left: 0;}
#banner .hd li{width: 0.2rem;height: 0.2rem;border:1px solid #fff;border-radius: 50%;display: inline-block;margin:0 4px;}
#banner .hd li.on{background: #9e5fd4;border-color:#9e5fd4; }
        
    </style>
    <script type="text/javascript">
    $(function(){
    /*根据banner个数增加下方指示点*/
     n=$(".ibanner .bd li").size();
     for (m=0;m<n;m++){
            $('.ibanner .hd').append('<li></li>');
        }
    /*banner切换*/    
    if($('.ibanner').length){
            TouchSlide({slideCell: "#banner",mainCell: ".bd",autoPlay: true,effect: "leftLoop",interTime:5000});
        }
    
});
    </script>
</head>
<body>
    <!-- 上部轮播开始-->
  <p id="banner" class="ibanner">
    <p class="tempWrap" style="overflow:hidden; position:relative;">
 
     <ul class="bd" style="width: 3840px; position: relative; 
overflow: hidden; padding: 0px; margin: 0px; transition-duration: 200ms;
 transform: translateX(-2560px);">
        <!-- 此处添加伦比图片-->
 
       <li style="display: table-cell; vertical-align: top; width: 
640px;"><a 
href="/upload/otherpic53/8453.jpg"></a></li>
        <li 
style="display: table-cell; vertical-align: top; width: 640px;"><a
 
href="/upload/otherpic53/8454.jpg"></a></li>
        <li 
style="display: table-cell; vertical-align: top; width: 640px;"><a
 
href="/upload/otherpic53/8455.jpg"></a></li>
        <li 
style="display: table-cell; vertical-align: top; width: 640px;"><a
 
href="/upload/otherpic53/8456.jpg"></a></li>
        <li 
style="display: table-cell; vertical-align: top; width: 640px;"><a
 
href="/upload/otherpic53/8457.jpg"></a></li>
      </ul>
    </p>
    <ul class="hd">
    </ul>
  </p>
  <!-- 上部轮播结束--> 
</body>
</html>

以上是html+css如何实现手机端网页自适应的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

新闻名称：html+css如何实现手机端网页自适应
本文URL：https://www.cdcxhl.com/article30/giddso.html

成都网站建设公司_创新互联，为您提供App设计、网站改版、做网站、网站制作、外贸网站建设、网站维护

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容