Question

怎样把CSS和javascript写的代码随着手机屏幕的大小变化而变化，变化排版不要乱！

Answer 1

亲，这个需要你知道rem与px的区别，如果要让手机自适应，用rem是最合适的。http://3g.bjnaotan999.com/css/css2.css 看看这个写的css .重点是最底下那一大段自适应的写法。然后你只要宽度是rem就OK。自己仔细研究一下。http://3g.bjnaotan999.com/ 你把这个网站css2.css和phonecommon.js用上，自然就会了。
原则1：html { font-size: 62.5%; } 这个必须写

原则2：css底下一长串的自适应判断。只要造抄就行。
原则3：css中所有的图片和div等等所以元素必须用rem单位，不能出现px单位。否侧会出错
原则4：所有的图片宽度必须设定。高度自适应或者设定。这样才能随着手机图片自适应。
原则5：所以图片必须写在html中，不能写在css中做背景。原因很简单，css中没法设定图片的宽高，也就不能自适应。
原则6：设计稿宽度为640px宽度，切图保存。写css时 将px大小除20换算出来的就是你要写的rem的大小。
至于js部分，只能一样画葫芦，跟着照写就行，靠自己领悟。
再次强调：要了解rem的单位和px单位的区别。

Answer 2

html5手机网站需要加的那些meta标签，手机网站自适应
<!-- 强制让文档与设备的宽度保持1：1 -->
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- 删除默认的苹果工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable"content="yes">
<!-- 在web app应用下状态条（屏幕顶部条）的颜色 -->
<meta name="apple-mobile-web-app-status-bar-style"content="black" />
<!-- 禁止了把数字转化为拨号链接 -->
<meta name="format-detection" content="telephone=no">
<!-- 浏览网站时的小图标 -->
<link rel="shortcut icon"href="http://p.www.xiaomi.com/favicon.ico"type="/image/x-icon">  
<!-- 添加至主屏时的图片 -->
<link rel="apple-touch-icon-precomposed"href="http://a.tbcdn.cn/mw/s/hi/tbtouch/images/touch-icon.png">

-----------------------------------
手机网页自适应HTML的meta标签
 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="telephone=no" name="format-detection">