<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv = "X-UA-Compatible" content = "IE=edge, chrome=1" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="Description" content=""/> <meta name="keywords" content=""/> <title>模板</title> <link rel="stylesheet" type="text/css" href="css/main.css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"> </script></head><body> <div id="header"></div> <div id="content"></div> <div id="footer"></div></body></html> |
这是一个通用的模板，
手机页面需要添加这行代码<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
pc版可以用他做自适应页面。
|
1
2
3
|
@media (min-320px) and (max-750px) { #header,#content,#footer{ 100%;}} |
这个是在屏幕宽度在320~750的时候使用这个里面的样式，他就可以在手机版的时候显示为手机样式。
总的来说PC版和手机版用的代码是一样的，不过就是手机版的做了一个判断屏幕宽度新应用了一套样式。