這幾天工作的總結，（手機前端
阿新 • • 發佈：2019-02-28
復制 elements enter char css cal ati body java
手機前端的準備工作
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即可
這幾天工作的總結，（手機前端