1、针对移动设备设置meta：<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>；
2、测试手机屏幕的宽度，基于此宽度对页面进行订制化布局与渲染
3、针对不同设备定制页面，利用js判断客户端设备并跳转到合适页面
html5 和 css3 实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name ="viewport" content="width = device-width,initial-scale=1"> <title>index01</title> <style type="text/css"> *{ margin:0px; padding: 0px; } .heading, .container, .footing{ margin: 10px auto; } .heading{ height: 100px; background-color: red; } .left, .right, .main{ height: 300px; background-color: yellow; } .footing{ height: 100px; background-color: gray; } <!--media="only screen and (max-640px)" 这句话的意思是:只要当渲染屏幕的宽度不大于640px的时候才会使用这个样式表--> @media screen and (min- 960px){ .heading, .container, .footing{ width:960px; } .left, .main, .right{ float: left; height: 500px; } .left, .right{ width:200px; } .main{ margin: 0px 5px; width:550px; } .container{ height: 500px; } } @media screen and (min- 600px) and (max- 960px){ .heading, .container, .footing{ width: 600px; } .left, .main{ float: left; height:400px; } .right{ display: none; } .left{ width: 160px; } .main{ width: 435px; margin-left: 5px; } .container{ height: 400px; } } @media screen and (max- 600px){ .heading, .container, .footing{ width: 400px; } .left, .right{ width: 400px; height: 100px; } .main{ margin-top: 10px; width:400px; height:200px; } .right{ margin-top: 10px; } .container{ height: 420px; } } </style> </head> <body> <div class="heading"></div> <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div> <div class="footing"></div> </body> </html>