html和css结合实现手机端网页自适应的代码

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

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

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

　　<metacontent="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。

　　!function(n){

　　vare=n.document,

　　t=e.documentElement,

　　i=640,

　　d=i/100,

　　o="orientationchange"inn?"orientationchange":"resize",

　　a=function(){

　　varn=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.好了，接下来为大家展示一个轮播图效果来说明一下，先上代码

　　<!doctypehtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

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

　　<title>无标题文档</title>

　　<scriptsrc="images/jquery-1.js"></script>

　　<scriptsrc="images/TouchSlide.js"></script>

　　<scriptsrc="images/rem.js"></script>

　　<style>

　　/*banner轮播切换star*/

　　body{margin:0auto!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.hdli{width:0.2rem;height:0.2rem;border:1pxsolid#fff;border-radius:50%;display:inline-block;margin:04px;}

　　#banner.hdli.on{background:#9e5fd4;border-color:#9e5fd4;}

　　</style>

　　<scripttype="text/javascript">

　　$(function(){

　　/*根据banner个数增加下方指示点*/

　　n=$(".ibanner.bdli").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>

　　<pid="banner"class="ibanner">

　　<pclass="tempWrap"style="overflow:hidden;position:relative;">

　　<ulclass="bd"style="width:3840px;position:relative;

　　overflow:hidden;padding:0px;margin:0px;transition-duration:200ms;

　　transform:translateX(-2560px);">

　　<listyle="display:table-cell;vertical-align:top;width:

　　640px;"><a