手机自适应设计代码以及案例
2016-08-23 12:07
211 查看
手机自适应设计的三大根本：
一：允许网页自动调整宽度
说明：viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%
二：不使用绝对宽度
CSS代码不能指定像素宽度： width:xxx px; 只能指定百分比宽度： width: xx%;或者：width:auto;
三：使用相对大小的字体
上面的代码指定，字体大小是页面默认大小的100%
手机自适应实现的方法：
一：使用百分比
把标签的宽度设置为百分比的样式，如
二、不同尺寸的屏幕调用不同的css样式
三、使用css实现，根据屏幕宽度设置css样式
四、使用 JS + CSS 来实现
JS案例：
手机端自适应小结：
手机端的HTML代码
CSS代码
一：允许网页自动调整宽度
<meta name="viewport" content="width=device-width, initial-scale=1" />
说明：viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%
二：不使用绝对宽度
CSS代码不能指定像素宽度： width:xxx px; 只能指定百分比宽度： width: xx%;或者：width:auto;
三：使用相对大小的字体
body { font: normal 100% Helvetica, Arial, sans-serif; }上面的代码指定，字体大小是页面默认大小的100%
手机自适应实现的方法：
一：使用百分比
把标签的宽度设置为百分比的样式，如
img{width:100%;}二、不同尺寸的屏幕调用不同的css样式
<link rel="stylesheet" type="text/css" href="style1.css" media="screen and (max-width: 600px)"><!--小于600像素时调用的样式--> <link rel="stylesheet" type="text/css" href="style2.css" media="screen and (min-width: 600px) and (max-width: 800px)"><!--大于600像素小于800像素时调用的样式-->
三、使用css实现，根据屏幕宽度设置css样式
@media screen and (min-width:371px) and (max-width:380px) {
.float_container .title_talk {font-size: 18px; background-size: 32px}
.float_container dd {width: 84%;margin-top: 12px;}
.float_container .box {font-size: 11px;margin-top: 1px;}
.float_container .btn_cf a {border-radius: 10px;font-size: 15px}
.float_container dt img{ margin-top: 36px;}
.cf{margin-top: -14px;}
}
@media screen and (min-width:381px) and (max-width:412px) {
.float_container .title_talk {font-size: 18px; background-size: 32px}
.float_container dd {width: 84%;margin-top: 12px;}
.float_container .box {font-size: 11px;margin-top: 1px;}
.float_container .btn_cf a {border-radius: 10px;font-size: 15px}
.float_container dt img{ margin-top: 36px;}
.cf{margin-top: -14px;}
}
@media screen and (min-width:413px) and (max-width:414px) {
.float_container .title_talk {font-size: 18px; background-size: 32px}
.float_container dd {width: 84%;margin: -8px;}
.float_container .box {font-size: 11px}
.float_container .btn_cf a {border-radius: 10px;font-size: 15px}
.float_container dt img{ margin-top: 23px;}
.cf{margin-top: 6px;}
}
@media screen and (min-width:415px) and (max-width:420px) {
.float_container .title_talk {font-size: 18px; background-size: 32px}
.float_container dd {width: 84%;margin: -8px;}
.float_container .box {font-size: 11px}
.float_container .btn_cf a {border-radius: 10px;font-size: 15px}
.float_container dt img{ margin-top: 23px;}
.cf{margin-top: -10px;}
}四、使用 JS + CSS 来实现
JS案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"><!-- 允许网页宽度自动调整 -->
<title>手机自适应测试网站</title>
</head>
<style>
ul,ol,li,dl{margin:0;padding:0;list-style-type:none;}
a{color:#333;text-decoration:none;}
body{font: normal 100% Helvetica, Arial, sans-serif;} /* 指定字体大小是页面默认大小的100% */
.ztwrap{margin:0 auto;max-width:640px;min-width:320px;background:#fff;padding:0 0 0.5rem;}
.nav{width:100%;background:#005ea1;overflow:hidden;padding:0.2rem 0rem;}
.nav ul li {width:20%;color: #fff;float:left; text-align: center;}
.nav ul li a {font-size:30%;display: block; color: #fff;}
</style>
<body>
<div class="ztwrap">
<div class="nav">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/">内容页</a></li>
<li><a href="/">内容页</a></li>
<li><a href="/">内容页</a></li>
<li><a href="/">内容页</a></li>
</ul>
</div>
</div>
<!-- JS设置不同手机屏幕大小缩放比例 -->
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
// 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
(function(){
return;
var dpr = scale =1;
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下，仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
//
var metaEl = "";
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale +
', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
})();
})(document, window);
</script>
</body>
</html>手机端自适应小结：
手机端的HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta name="wap-font-scale" content="no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>文件名</title>
<meta name="description" content="{$description}" />
<meta name="keywords" content="{$keywords}" />
<link type="text/css" rel="stylesheet" href="./css/XXX.css" />
<script src="./js/XXX.js"></script>
<base target="_blank"/>
</head>
<body>
<div class="ztwrap">
<!-- 这里面是内容 -->
</div>
</body>
</html>CSS代码
@charset "utf-8";
/* CSS Document */
/* 去掉iPad iPhone input默认css样式 */
input[type="submit"],
input[type="reset"],
input[type="button"],
button{-webkit-appearance:none;}
input,textarea{border:0;-webkit-appearance:none;}
/**手机通用样式**/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,em{margin:0;padding:0;word-wrap:break-word;}
input, textarea, button, a{-webkit-tap-highlight-color:rgba(0,0,0,0);}
html{background:#fff;color:#333333;font-family:Microsoft YaHei, Arial, Helvetica, Tahoma, Helvetica, SimHei,"微软雅黑", sans-serif;}
ul,ol,li,dl{margin:0;padding:0;list-style-type:none;}
h1, h2, h3, h4, h5, h6{font-weight:normal;font-size:100%;}
img,border{margin:0;border:0;font-size:0;}
.clear{clear:both;overflow:hidden;width:0px;height:0px;}
.clear2{clear:both;}
table{width:100%;border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;}
a:hover,a:active,a:focus,a:active{text-decoration:none;color:#1d64b1;}
img{border:0;vertical-align:middle;}
i,s,em{text-decoration:none;font-style:normal;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
a,button,input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;/* For some Androids */}
html{-webkit-text-size-adjust:none;}
img{border:0;vertical-align:middle;max-width:100%;height:auto;width:auto\9;-webkit-touch-callout:none;}
.red{color:#e10000;}
body{font: normal 100% Helvetica, Arial, sans-serif;}
/* 默认的div样式 */
.ztwrap{
font-size:0.2rem;/* 设置div里面默认字体的大小 */
overflow:hidden;margin:0 auto;max-width:640px;min-width:320px;background:#fff;padding:0 0 0.2rem;
-webkit-box-shadow:0px 0px 10px #bbbbbd;
-moz-box-shadow:0px 0px 10px #bbbbbd;
box-shadow:0px 0px 10px #bbbbbd;
/* For IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#bbbbbd')";
/* For IE 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135,
Color='#bbbbbd');}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端通信：SSE设计方案（二）--- 服务器推送技术的实践以及一些应用场景的demo（包括在线及时聊天系统以及线上缓存更新，代码热修复案例）
- 简历群发器设计以及代码实现JDK6HTTP+DOM4j 推荐
- 简历群发器设计以及代码实现JDK6HTTP+DOM4j
- 设计模式之状态模式案例代码
- 手机web——自适应网页设计（html/css控制）
- L型代码结构设计案例：BrothersDropdownList()
- 关于最近公司开展内训讲课实例代码等架构设计方面的案例说明
- 设计模式之简单工厂模式学习案例代码
- ajax心得3--编写ajax同用工具代码以及案例分析
- 如何编写优雅的代码：06. 设计模式应用案例(上)
- 专为手机号码设计的特殊的排序[我的代码]
- 获取手机屏幕大小以及横竖屏判断的一段代码
- 极佳的手机网站设计案例
- 设计模式案例代码之外观模式
- 设计模式学习笔记以及java代码实现
- 让手机网页浏览器自动适应页面的代码
- 20佳优秀精美手机移动mobile网站案例设计欣赏
- [技术讨论]架构设计和代码之间的关系以及程序员任务安排
- 手机web――自适应网页设计（html/css控制）
- ajax心得3--编写ajax同用工具代码以及案例分析