刚入前端整合的一个手机端页面适配+预加载+获取资源加载进度等的一个小模板 - 龙心smile_H5之家

刚入前端不久，之前主要学的是pc端的布局，到公司之后负责的主要是移动段页面，刚开始时为了使页面适应移动端不同的屏幕大小采用的是百分比加媒体查询的方式，做完一个项目之后，感觉非常不好，虽然最后也基本使页面做到了适配。所以做完这个项目之后，我就在网上查找各种屏幕适配的方案，最终找到了一个通过js控制使页面整体缩放的方案，还有一个就是通过js实时检测屏幕大改变html根字体大小的rem布局方案。目前我在使用的是缩放的方案。整体代码基本上是整合的是大牛们分享的一些实用代码，如有什么bug欢迎提出，共同进步！

HTML代码

手机页面模板为了更好的体验，请使用竖屏浏览

css初始化代码

1 body, nav, dl, dt, dd, p, h1, h2, h3, h4, ul, ol, li, input, button, textarea, footer { 2 margin: 0; 3 padding: 0 4 } 5 *:not(input,textarea) { 6 -webkit-touch-callout: inherit; 7 -webkit-user-select: auto; 8 } 9 html{ 10 width: 100%; 11 height: 100%; 12 } { 15 font-family: "微软雅黑", Arial, sans-serif ,Microsoft Yahei,Simsun; 16 font-size: 14px; 17 color: #333; 18 background-color: red; 19 width: 100%; 20 height: 100%; 21 position: relative; 22 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 23 -webkit-text-size-adjust: none; 24 min-width: 320px; 25 max-width: 640px; 26 overflow: hidden; 27 margin: 0 auto; 28 } { 31 font-size: 100% 32 } { 35 display: inline 36 } { 39 list-style: none 40 } { 43 text-decoration: none; 44 color: #1a1a1a 45 } { 48 color: #1c5aa2; 49 text-decoration: none; 50 } { 53 color: #aaa; 54 } 55 a, img { } 58 img { 59 vertical-align: middle; 60 border: 0; 61 -ms-interpolation-mode: bicubic; 62 } { 65 font-size: 100%; 66 vertical-align: middle; 67 outline: none; 68 } { 71 resize: none 72 } { 75 cursor: pointer; 76 -webkit-appearance: button; 77 -moz-appearance: button 78 } { 81 color: transparent 82 } { 85 padding: 0; 86 border: 0 87 } { 90 border-collapse: collapse; 91 border-spacing: 0 92 }

加载动画，选择横竖屏显示css代码

1 .box{ 2 width:100%; 3 height:100%; 4 background-color: #0abdff; : hidden; 7 } { 11 width: 100%; 12 height: 100%; 13 position: absolute; 14 top: 0; 15 left: 0; 16 background-color: black; 17 z-index: 11; 18 display: -webkit-box; 19 -webkit-box-pack: center; 20 -webkit-box-align: center; 21 } { 24 position: relative; 25 width: 100px; 26 height: 100px; 27 } { 30 width: 100px; 31 position: absolute; 32 top: 0; 33 left: 0; 34 z-index: 13; 35 -webkit-animation: rotate 1s linear infinite; 36 animation: rotate 1s linear infinite 37 } { 40 width: 80px; 41 height: 80px; 42 font-size: 25px; 43 font-weight: bold; 44 color: rgba(255, 255, 255, 0.65); 45 line-height: 80px; 46 position: absolute; 47 top: 10px; 48 left: 10px; 49 z-index: 14; 50 text-align: center; 51 } { 55 0% { 56 -webkit-transform: rotate(0deg); 57 -ms-transform: rotate(0deg); 58 transform: rotate(0deg); 59 } 60 50% { 61 -webkit-transform: rotate(180deg); 62 -ms-transform: rotate(180deg); 63 transform: rotate(180deg); 64 } 65 100% { 66 -webkit-transform: rotate(360deg); 67 -ms-transform: rotate(360deg); 68 transform: rotate(360deg); 69 } 70 } { 73 0% { 74 -webkit-transform: rotate(0deg); 75 -ms-transform: rotate(0deg); 76 transform: rotate(0deg); 77 } 78 50% { 79 -webkit-transform: rotate(180deg); 80 -ms-transform: rotate(180deg); 81 transform: rotate(180deg); 82 } 83 100% { 84 -webkit-transform: rotate(360deg); 85 -ms-transform: rotate(360deg); 86 transform: rotate(360deg); 87 } 88 } { 92 10% { 93 transform: rotate(90deg); 94 -webkit-transform: rotate(90deg) 95 } 96 50%, 60% { 97 transform: rotate(0deg); 98 -webkit-transform: rotate(0deg) 99 } 100 90% { 101 transform: rotate(90deg); 102 -webkit-transform: rotate(90deg) 103 } 104 100% { 105 transform: rotate(90deg); 106 -webkit-transform: rotate(90deg) 107 } 108 } { 111 10% { 112 transform: rotate(90deg); 113 -webkit-transform: rotate(90deg) 114 } 115 50%, 60% { 116 transform: rotate(0deg); 117 -webkit-transform: rotate(0deg) 118 } 119 90% { 120 transform: rotate(90deg); 121 -webkit-transform: rotate(90deg) 122 } 123 100% { 124 transform: rotate(90deg); 125 -webkit-transform: rotate(90deg) 126 } 127 } { 130 display: none; 131 } { 134 #orientLayer { 135 display: block; 136 } { 139 width: 100%; 140 height: 100%; 141 } 142 } { 145 display: none; 146 position: fixed; 147 height: 100%; 148 width: 100%; 149 left: 0; 150 top: 0; 151 right: 0; 152 bottom: 0; 153 background: #000; 154 z-index: 9997 155 } { 158 position: absolute; 159 width: 100%; 160 top: 45%; 161 margin-top: -75px; 162 text-align: center 163 } { 166 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAADaCAMAAABU68ovAAAAXVBMVEUAAAD29vb////x8fH////////x8fH5+fn29vby8vL////5+fn39/f6+vr////x8fH////////+/v7////09PT////x8fH39/f////////////////////x8fH///+WLTLGAAAAHXRSTlMAIpML+gb4ZhHWn1c2gvHBvq1uKJcC6k8b187lQ9yhhboAAAQYSURBVHja7d3blpowFIDhTUIAOchZDkre/zE7ycySrbUUpsRN2/1fzO18KzEqxEVgTiZNfgmmtxRc8iaR8HNe8x4BtjQePKayYCIoyBSgvNNE1AkNSHqZyLqk97EgUCCHBzZ5mkg7ScvIJuIyOyXBRFxgpqWZyGsAZLB1KjsJi8nutHU4JCRbFRH8tmirI9k8Jx2sqNs8K/m0LQkrktO2crgcgXGB4AiTEsB0hJfo9MGgX7CGcYiYwQxmMOOvZwRhBG8tCoMXjBDeXvWCEcHbi14wgCBmMIMZzGAGM5jxETNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxY6E2rUQxnH2tz9cirlJFwFBJedaPnUv0M7++egPDE8iAJcIDmxwH5wwv9vUviw2kLbVO3TJU5uul/EyB0FoLp4x60PdGUd3qPurrWyjGGTc05u+1dcgI7/+tCCPARWGhH7o5Y7RCf+bH9ctXLp6v2BVDxfqz0oPXeSVaNtINo/1SXDv4dck8IIkbhtC2ol+iouEonTBCbYvVMnXOjxww6s/RFrBUpXHh/gw1rHj5d/qhYn9Gpk2FWh6xRBRX5Oj3Znh2Sq49/L6+y8pB26q9GbE2dbA2mVbx6I+7MfBglLCttm73ZQi7AD3iL4HqjFYJHSPRppqaUaJ3ATpGa+ckpGak2hRRMyqjGMkvl+xyFeSMwjAqcsZgGDdyhl0oNTnDN4yenJGZFGxNChP5/Y3efh6SM2rDOJMzboYxkDMqwyjIGcIw6F+io2FU1IxIm1JqRmgXSkvNKNCXeTpGrU0JNSO2c6LIGPgCS8AuDHz9ta0SXWDtxoDRH+MqlbC2Dt2G2JFRadtQZt2qq/orGowdGb2euxYiqWEpVWhTBnszoNAPdStuQwxqf0aocdWKW4Z+DfszIh8pxJqbuCE4YAC+4bm0evtipjpgJHeFnyyt1Ku2xa0bhjxr27p75rECNwyI9ZwvXkHq+7aTaMEV44YYy/spfgjgjNHaWW+GeUhGEX7tLlVinIFDDSgnOwhi1V6bU0b6tVS9eAERe863g4dRrtiHdc6o+nn5vtyVVgR79Cqt4uL6gfHPQyGqtP2vf7HADGbcYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JjhtOM+J/AgT008yDMkN/dPP9hzS8zAMQN3OEYeekp5YU7KOKXwVXqiY+QS7smcinGKABWdiBgpPJTSMHJ4KidhhPBUSMLw4CmPhKHgKUXCkHsygum71ftNSgCX6bsl8FQyfbcL5EdYsDk0R3j7aiA5wpt5AjKg/2gLJEBD/0Hf2OOf/vRrj6z/7GtP4B3nMKyjHA12kIPSjnJs3FEO0TvKkYJHOWCR+rjJH0Vn6fI5PjNbAAAAAElFTkSuQmCC'); 167 display: inline-block; 168 width: 67px; 169 height: 109px; 170 transform: rotate(90deg); 171 -webkit-transform: rotate(90deg); 172 -webkit-animation: rotation infinite 1.5s ease-in-out; 173 animation: rotation infinite 1.5s ease-in-out; 174 -webkit-background-size: 67px; 175 background-size: 67px 176 } { 179 margin-top: 20px; 180 font-size: 15px; 181 color: #fff 182 }

终端检测与资源预加载js代码