手机前端的准备工作
html配置
<!doctype html> <html> <head> <meta charset="utf-8"> <title>xxxxx移动端</title> <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0"> <link rel="stylesheet" href="css/help2.css"> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/help2.js"></script> <script> //通过window.screen.width获取屏幕的宽度 var offWidth = window.screen.width / 25; //这里用宽度/25表示1rem取得的px document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; //把rem的值复制给顶级标签html的font-size </script> </head> <body>
css配置
*{ padding: 0; margin: 0; list-style: none; background-position: center; background-repeat: no-repeat; background-size: contain; font-family: "微软雅黑"; } body{ background-color: #f1f1f1; } a{ text-decoration: none; color: inherit; } .clear{clear: both;}
关于单位，移动端以1rem 表示30px， 一般以750px表示最大宽度，所以，移动端的最大宽度 = 750/30 即25rem
关于移动端开发与网页端的不同：
1，单位换算
如果字体不设置font-size = xxxrem ，会显得非常小
rem一般可以使用三位小数
开发移动端的注意事项：
1，div设置了margin-top:xxrem,父元素也跟着跑，这是由于div的第一个元素假传圣旨，把父类的margin-top也同步了，这种情况设置父类元素的padding-top即可