手机端的页面怎么开发,和web html有区别吗
2016-11-12 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI&UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
展开全部
<!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-width:320px) and (max-width:750px) {
#header,#content,#footer{width: 100%;}
}
这个是在屏幕宽度在320~750的时候使用这个里面的样式,他就可以在手机版的时候显示为手机样式。
总的来说PC版和手机版用的代码是一样的,不过就是手机版的做了一个判断屏幕宽度新应用了一套样式。
<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-width:320px) and (max-width:750px) {
#header,#content,#footer{width: 100%;}
}
这个是在屏幕宽度在320~750的时候使用这个里面的样式,他就可以在手机版的时候显示为手机样式。
总的来说PC版和手机版用的代码是一样的,不过就是手机版的做了一个判断屏幕宽度新应用了一套样式。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询