手機端自適應頁面通用CSS及公用HTML寫法
阿新 • • 發佈：2019-01-01
把頁面的通用屬性全部寫出來。
所有的手機端新建專案時候都可以直接拿這套程式碼快速搭建一個手機端框架。
js中規定了頁面最大寬度。為16rem。所以width：16rem；就等於width：100%；
我一般喜歡把邊距設定為0.5rem。所以頁面一般寬度我寫了15rem。
rem寫法好處是，自適應手機屏，手機屏不管是大小，都完美顯示，不會錯位。
相比用百分比寫法，rem寫法計算相對簡單。
設計圖畫多大畫素就對應寫多少rem。比百分比頁面精確。
HTML部分，在html標籤上寫一個id。然後js控制html頁面寬度。layui.js 和 jquery.js 自行引入。我就不提供了。
<!DOCTYPE html> <html lang="en" id="leekoh"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <link rel="stylesheet" href="layui/css/layui.css" /> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="layui/layui.js"></script> <title></title> </head> <body> <nav> <a onClick="javascript :history.back(-1);"><i class="layui-icon layui-icon-left" style="color: #fff; width: 40px; line-height: 2rem;"></i></a> <span class="renwu">首頁</span> </nav> <div class="nav_bg"></div> </body> </html>
css部分清除原始的標籤屬性。後面用起來更順手。
*{ margin: 0; padding: 0; border: 0; color: #333; font-family: "\5FAE\8F6F\96C5\9ED1", Arial; } html { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; font-size: 20px; background: #F2F2F2; } body { min-width: 320px; max-width: 640px; margin: 0 auto; } a { text-decoration: none; color: #333; webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none; } table { border: 0; margin: 0; border-collapse: collapse; border-spacing: 0; } table th, table td { border: 0; } img { border: 0; vertical-align: top; } i, em { font-style: normal; } ol, ul, li { list-style: none; } input, textarea, select, button { padding: 0 ; margin: 0; outline: none; font-family: "\5FAE\8F6F\96C5\9ED1", Arial; } input[type="submit"] { appearance: none; -moz-appearance: none; -webkit-appearance: none; /*去除input預設樣式*/ } input { appearance: none; -moz-appearance: none; -webkit-appearance: none; /*去除input預設樣式*/ } h1, h2, h3, h4, h5, h6 { font-weight: normal; } .color_fff { color: #fff; } nav { width: 15rem; padding: 0 0.5rem; height: 2rem; background: #DD2727; color: #fff; overflow: hidden; margin: auto; position: fixed; top: 0; } nav a { width: 3rem; height: 2rem; color: #fff; float: left; line-height: 2rem; } nav a:nth-child(3) { width: 3rem; height: 2rem; color: #fff; float: right; line-height: 2rem; text-align: right; } nav span { width: 9rem; color: #fff; float: left; text-align: center; line-height: 2rem; } .nav_bg { width: 16rem; height: 2rem; }
js部分 主要是控制頁面寬度，大小等。
$(function(){
var _width = $(window).width();
var _ziHao = 20 * (_width/320);
if(_width < 641){
$("#leekoh").css({"font-size":_ziHao + "px"})
}
})