html+css如何实现手机端网页自适应
导读：本文共2779.5字符，通常情况下阅读需要9分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 一，最近在做项目，写移动端的网页，主要是自适应的问题。bootstrap等前端框架用的不好，又不想耽误时间，不能自适应很烦人，这里给大家介绍下我的方法，也是结合了很多人的思路。1.在头部加入这样的一行代码：<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0... ...
目录
(为您整理了一些要点),点击可以直达。一，最近在做项目，写移动端的网页，主要是自适应的问题。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="https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/digss2r4dyz.jpg"></a></li> <li style="display: table-cell; vertical-align: top; width: 640px;"><ahref="https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/hwfrrfrfne3.jpg"></a></li> <li style="display: table-cell; vertical-align: top; width: 640px;"><ahref="https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/oijwhjtzsbv.jpg"></a></li> <li style="display: table-cell; vertical-align: top; width: 640px;"><ahref="https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/m4s1dnjiof2.jpg"></a></li> <li style="display: table-cell; vertical-align: top; width: 640px;"><ahref="https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/l15h3cnqrjd.jpg"></a></li> </ul> </p> <ul class="hd"> </ul> </p> <!-- 上部轮播结束--> </body></html> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">html+css如何实现手机端网页自适应的详细内容，希望对您有所帮助，信息来源于网络。