赢得财富加载进程等的多个小模板,刚入前端整合的一个部手提式无线电话机端页面适配

By admin in 4858美高梅 on 2019年4月6日

       刚入前端不久,之前根本学的是pc端的布局,到商店然后承受的第1是移动段页面,刚起首时为了使页面适应移动端分裂的显示屏尺寸接纳的是百分比加媒体询问的点子,做完3个门类事后,感觉一无可取,纵然最后也基本使页面做到了适配。所以做完那些项目事后,我就在网上搜索各样荧屏适配的方案,最后找到了二个通过js控制使页面全部缩放的方案,还有三个正是经过js实时检查测试显示器大改观html根字体大小的rem布局方案。近年来本人在选择的是缩放的方案。全体代码基本上是整合的是大腕们分享的片段实用代码,如有啥bug欢迎建议,共同升高!

       刚入前端不久,在此以前根本学的是pc端的布局,到铺子然后承受的最首假如运动段页面,刚初阶时为了使页面适应移动端不一致的显示屏尺寸采取的是百分比加媒体询问的章程,做完三个项目然后,感觉很是倒霉,即便最后也基本使页面做到了适配。所以做完那么些连串然后,作者就在网上搜索各样显示屏适配的方案,最后找到了一个经过js控制使页面全部缩放的方案,还有3个正是透过js实时检验显示屏大转移html根字体大小的rem布局方案。近年来本人在运用的是缩放的方案。全体代码基本上是构成的是大拿们享受的一部分实用代码,如有何bug欢迎提议,共同提高!

刚入前端整合的一个部手提式有线话机端页面适配+预加载+获取能源加载进程等的二个小模板,前端适配

    
  刚入前端不久,以前根本学的是pc端的布局,到集团然后承受的重点是运动段页面,刚开头时为了使页面适应移动端分裂的荧屏尺寸选择的是百分比加媒体询问的点子,做完3个类型然后,感觉卓殊倒霉,即使最后也基本使页面做到了适配。所以做完那个连串然后,小编就在网上搜索种种显示器适配的方案,最终找到了二个因此js控制使页面全体缩放的方案,还有三个就是通过js实时检查测试荧屏大转移html根字体大小的rem布局方案。近日自家在利用的是缩放的方案。全部代码基本上是整合的是大咖们享受的局地实用代码,如有何bug欢迎提议,共同提高!

HTML代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=640">
 6     <meta content="yes" name="apple-mobile-web-app-capable">
 7     <meta content="black" name="apple-mobile-web-app-status-bar-style">
 8     <meta content="telephone=no" name="format-detection">
 9     <link rel="stylesheet" href="css/comment.css">
10     <link rel="stylesheet" href="css/index.css">
11     <!--适配js代码-->
12     <script src="js/mobile-util.js"></script>
13     <script src="js/jquery-2.1.4.min.js"></script>
14     <!--获取资源加载进度获取插件-->
15     <script src="js/pace.js"></script>
16     <title>手机页面模板</title>
17 </head>
18 <body>
19 <div class="box">
20 
21 </div>
22 
23 <!--加载进度显示-->
24 <div class="load" >
25     <div class="con-load">
26         <img src="img/loading.png" alt="4858美高梅 1">
27         <p></p>
28     </div>
29 </div>
30 <!--旋转提示-->    <!-- 选择禁止横屏或竖屏显示-->
31 <div id="orientLayer" class="mod-orient-layer">
32     <div class="mod-orient-layer__content">
33         <i class="icon mod-orient-layer__icon-orient"></i>
34         <div class="mod-orient-layer__desc">为了更好的体验,请使用竖屏浏览</div>
35     </div>
36 </div>
37 </body>
38 <script src="js/index.js"></script>
39 </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 }
13 
14 body {
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 }
29 
30 h1, h2, h3, h4, h5, h6 {
31     font-size: 100%
32 }
33 
34 form {
35     display: inline
36 }
37 
38 ul, ol {
39     list-style: none
40 }
41 
42 a {
43     text-decoration: none;
44     color: #1a1a1a
45 }
46 
47 a:hover, a:active, a:focus {
48     color: #1c5aa2;
49     text-decoration: none;
50 }
51 
52 a:active {
53     color: #aaa;
54 }
55 a, img {
56     -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
57 }
58 img {
59     vertical-align: middle;
60     border: 0;
61     -ms-interpolation-mode: bicubic;
62 }
63 
64 button, input, select, textarea {
65     font-size: 100%;
66     vertical-align: middle;
67     outline: none;
68 }
69 
70 textarea {
71     resize: none
72 }
73 
74 button, input[type="button"], input[type="reset"], input[type="submit"] {
75     cursor: pointer;
76     -webkit-appearance: button;
77     -moz-appearance: button
78 }
79 
80 input:focus:-moz-placeholder, input:focus::-webkit-input-placeholder {
81     color: transparent
82 }
83 
84 button::-moz-focus-inner, input::-moz-focus-inner {
85     padding: 0;
86     border: 0
87 }
88 
89 table {
90     border-collapse: collapse;
91     border-spacing: 0
92 }

加载动画,选择横竖屏展现css代码

  1 .box{
  2     width:100%;
  3     height:100%;
  4     background-color: #0abdff;
  5     /*height:1010px;*/
  6     overflow: hidden;
  7 }
  8 
  9 /*加载进度样式*/
 10 .load {
 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 }
 22 
 23 .con-load {
 24     position: relative;
 25     width: 100px;
 26     height: 100px;
 27 }
 28 
 29 .load img {
 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 }
 38 
 39 .load p {
 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 }
 52 
 53 /*加载进度动画*/
 54 @-webkit-keyframes rotate {
 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 }
 71 
 72 @keyframes rotate {
 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 }
 89 /*横竖屏代码*/
 90 /* 样式放在结尾,防止 base64 图片造成拥塞 */
 91 @-webkit-keyframes rotation {
 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 }
109 
110 @keyframes rotation {
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 }
128 
129 #orientLayer {
130     display: none;
131 }
132 
133 @media screen and (min-aspect-ratio: 13/9) {
134     #orientLayer {
135         display: block;
136     }
137 
138     body {
139         width: 100%;
140         height: 100%;
141     }
142 }
143 
144 .mod-orient-layer {
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 }
156 
157 .mod-orient-layer__content {
158     position: absolute;
159     width: 100%;
160     top: 45%;
161     margin-top: -75px;
162     text-align: center
163 }
164 
165 .mod-orient-layer__icon-orient {
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 }
177 
178 .mod-orient-layer__desc {
179     margin-top: 20px;
180     font-size: 15px;
181     color: #fff
182 }

顶点检验与财富预加载js代码

 1 /**
 2  * Created by w on 2016/8/16.
 3  */
 4 //    终端检测函数
 5 var ua = parseUA();
 6 function parseUA() {
 7     var u = navigator.userAgent;
 8     var u2 = navigator.userAgent.toLowerCase();
 9     return { //移动终端浏览器版本信息
10         trident: u.indexOf('Trident') > -1, //IE内核
11         presto: u.indexOf('Presto') > -1, //opera内核
12         webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
13         gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
14         mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
15         ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
16         android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
17         iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
18         iPad: u.indexOf('iPad') > -1, //是否iPad
19         webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
20         iosv: u.substr(u.indexOf('iPhone OS') + 9, 3),
21         weixin: u2.match(/MicroMessenger/i) == "micromessenger",
22         taobao: u.indexOf('AliApp(TB') > -1,
23     };
24 }
25 // 资源预加载   图片,音频,视频,js,css等文件资源都可以
26 var images = new Array();
27 preload(
28     "http://stg-smartlearning.com/download/css3d-engine-master/img/yauncheng.png",
29     "http://stg-smartlearning.com/download/css3d-engine-master/img/dupian.png",
30     "http://stg-smartlearning.com/download/css3d-engine-master/img/feidaoshoushu.png",
31     "http://stg-smartlearning.com/download/css3d-engine-master/img/yuanchengkanhu.png",
32     "http://stg-smartlearning.com/download/css3d-engine-master/img/shangmentiyan.png",
33     "http://stg-smartlearning.com/download/css3d-engine-master/img/yihudaojia.png",
34     "http://www.stg-smartlearning.com/download/city/video/guSheng.mp3",
35     "http://www.stg-smartlearning.com/download/www/city/video/flash1.mp4",
36     "http://www.stg-smartlearning.com/download/www/city/video/flash2.mp4",
37     "http://www.stg-smartlearning.com/download/www/city/video/haitong.mp4",
38     "http://www.stg-smartlearning.com/download/www/city/video/hang1.mp4",
39     "http://www.stg-smartlearning.com/download/www/city/img/1241362.jpg",
40     "http://www.stg-smartlearning.com/download/www/city/img/haitong.png",
41     "http://www.stg-smartlearning.com/download/www/city/img/ht.png"
42 );
43 function preload() {
44     for (i = 0; i < preload.arguments.length; i++) {
45         images[i] = new Image();
46         images[i].src = preload.arguments[i]
47     }
48 }

显示屏适配js代码

/**
 * Created by w on 2016/7/18.
 */
/**
 * MobileWeb 通用功能助手,包含常用的 UA 判断、页面适配、search 参数转 键值对。
 * 该 JS 应在 head 中尽可能早的引入,减少重绘。
 *
 * fixScreen 方法根据两种情况适配,该方法自动执行。
 *      1. 定宽: 对应 meta 标签写法 -- <meta name="viewport" content="width=750">
 *          该方法会提取 width 值,主动添加 scale 相关属性值。
 *          注意: 如果 meta 标签中指定了 initial-scale, 该方法将不做处理(即不执行)。
 *      2. REM: 不用写 meta 标签,该方法根据 dpr 自动生成,并在 html 标签中加上 data-dpr 和 font-size 两个属性值。
 *          该方法约束:IOS 系统最大 dpr = 3,其它系统 dpr = 1,页面每 dpr 最大宽度(即页面宽度/dpr) = 750,REM 换算比值为 16。
 *          对应 css 开发,任何弹性尺寸均使用 rem 单位,rem 默认宽度为 视觉稿宽度 / 16;
 *              scss 中 $ppr(pixel per rem) 变量写法 -- $ppr: 750px/16/1rem;
 *                      元素尺寸写法 -- html { font-size: $ppr*1rem; } body { width: 750px/$ppr; }。

 */
window.mobileUtil = (function(win, doc) {
    var UA = navigator.userAgent,
        isAndroid = /android|adr/gi.test(UA),
        isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, // 据说某些国产机的UA会同时包含 android iphone 字符
        isMobile = isAndroid || isIos;  // 粗略的判断

    return {
        isAndroid: isAndroid,
        isIos: isIos,
        isMobile: isMobile,

        isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA),
        isWeixin: /MicroMessenger/gi.test(UA),
        isQQ: /QQ\/\d/gi.test(UA),
        isYixin: /YiXin/gi.test(UA),
        isWeibo: /Weibo/gi.test(UA),
        isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),

        tapEvent: isMobile ? 'tap' : 'click',

        /**
         * 缩放页面
         */
        fixScreen: function() {
            var metaEl = doc.querySelector('meta[name="viewport"]'),
                metaCtt = metaEl ? metaEl.content : '',
                matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
                matchWidth = metaCtt.match(/width=([^,\s]+)/);

            if ( !metaEl ) { // REM
                var docEl = doc.documentElement,
                    maxwidth = docEl.dataset.mw || 640, // 每 dpr 最大页面宽度
                    dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
                    scale = 1 / dpr,
                    tid;

                docEl.removeAttribute('data-mw');
                docEl.dataset.dpr = dpr;
                metaEl = doc.createElement('meta');
                metaEl.name = 'viewport';
                metaEl.content = fillScale(scale);
                docEl.firstElementChild.appendChild(metaEl);

                var refreshRem = function() {
                    var width = docEl.getBoundingClientRect().width;
                    if (width / dpr > maxwidth) {
                        width = maxwidth * dpr;
                    }
                    var rem = width / 16;
                    docEl.style.fontSize = rem + 'px';
                };

                win.addEventListener('resize', function() {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }, false);
                win.addEventListener('pageshow', function(e) {
                    if (e.persisted) {
                        clearTimeout(tid);
                        tid = setTimeout(refreshRem, 300);
                    }
                }, false);

                refreshRem();
            } else if ( isMobile && !matchScale && ( matchWidth && matchWidth[1] != 'device-width' ) ) { // 定宽
                var    width = parseInt(matchWidth[1]),
                    iw = win.innerWidth || width,
                    ow = win.outerWidth || iw,
                    sw = win.screen.width || iw,
                    saw = win.screen.availWidth || iw,
                    ih = win.innerHeight || width,
                    oh = win.outerHeight || ih,
                    ish = win.screen.height || ih,
                    sah = win.screen.availHeight || ih,
                    w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
                    scale = w / width;

                if ( scale < 1 ) {
                    metaEl.content = metaCtt + ',' + fillScale(scale);
                }
            }

            function fillScale(scale) {
                return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';
            }
        },

        /**
         * 转href参数成键值对
         * @param href {string} 指定的href,默认为当前页href
         * @returns {object} 键值对
         */
        getSearch: function(href) {
            href = href || win.location.search;
            var data = {},reg = new RegExp( "([^?=&]+)(=([^&]*))?", "g" );
            href && href.replace(reg,function( $0, $1, $2, $3 ){
                data[ $1 ] = $3;
            });
            return data;
        }
    };
})(window, document);

// 默认直接适配页面
mobileUtil.fixScreen();

 全部代码打包下载:

刚入前端不久,在此之前重要学的是pc端的布局,到…

4858美高梅,挪动端适配中,作者所明白的三种缓解方案

HTML代码

HTML代码

Media Query(由于相比较麻烦,笔者在付出中早就运用很少了):


  1. 为差异幅度的显示屏写分歧的体裁,让用户选用分裂装备访问同2个网址的时候,都能够取得更加好的UI、UE体验。其超级的代表正是Bootshrap
    之类的响应式框架了,此类框架不可胜道,技术达成也针锋绝对简便易行,只要求开发者为不一致的用户支付差别的UI界面就行了,相对rem布局,Media
    Query布局只可以通过使用%单位来自适应宽度,中度不能够自适应。并且为了增强分裂显示屏宽度下的用户体验,必须花不少的素养多写几套布局来适配部分荧屏会有如下二种难题:

    1. 不知所可适配全数的显示器;
    2. 适配显示器数量越来越多,工作量越辛勤;
    3. 赢得财富加载进程等的多个小模板,刚入前端整合的一个部手提式无线电话机端页面适配。若是将为差异显示器的体制分开写,种种css文件中会有重新的1些,不便于代码复用,不分开写,代码有限的杂乱,可读性较低;
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=640">
 6     <meta content="yes" name="apple-mobile-web-app-capable">
 7     <meta content="black" name="apple-mobile-web-app-status-bar-style">
 8     <meta content="telephone=no" name="format-detection">
 9     <link rel="stylesheet" href="css/comment.css">
10     <link rel="stylesheet" href="css/index.css">
11     <!--适配js代码-->
12     <script src="js/mobile-util.js"></script>
13     <script src="js/jquery-2.1.4.min.js"></script>
14     <!--获取资源加载进度获取插件-->
15     <script src="js/pace.js"></script>
16     <title>手机页面模板</title>
17 </head>
18 <body>
19 <div class="box">
20 
21 </div>
22 
23 <!--加载进度显示-->
24 <div class="load" >
25     <div class="con-load">
26         <img src="img/loading.png" alt="4858美高梅 2">
27         <p></p>
28     </div>
29 </div>
30 <!--旋转提示-->    <!-- 选择禁止横屏或竖屏显示-->
31 <div id="orientLayer" class="mod-orient-layer">
32     <div class="mod-orient-layer__content">
33         <i class="icon mod-orient-layer__icon-orient"></i>
34         <div class="mod-orient-layer__desc">为了更好的体验,请使用竖屏浏览</div>
35     </div>
36 </div>
37 </body>
38 <script src="js/index.js"></script>
39 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=640">
 6     <meta content="yes" name="apple-mobile-web-app-capable">
 7     <meta content="black" name="apple-mobile-web-app-status-bar-style">
 8     <meta content="telephone=no" name="format-detection">
 9     <link rel="stylesheet" href="css/comment.css">
10     <link rel="stylesheet" href="css/index.css">
11     <!--适配js代码-->
12     <script src="js/mobile-util.js"></script>
13     <script src="js/jquery-2.1.4.min.js"></script>
14     <!--获取资源加载进度获取插件-->
15     <script src="js/pace.js"></script>
16     <title>手机页面模板</title>
17 </head>
18 <body>
19 <div class="box">
20 
21 </div>
22 
23 <!--加载进度显示-->
24 <div class="load" >
25     <div class="con-load">
26         <img src="img/loading.png" alt="4858美高梅 3">
27         <p></p>
28     </div>
29 </div>
30 <!--旋转提示-->    <!-- 选择禁止横屏或竖屏显示-->
31 <div id="orientLayer" class="mod-orient-layer">
32     <div class="mod-orient-layer__content">
33         <i class="icon mod-orient-layer__icon-orient"></i>
34         <div class="mod-orient-layer__desc">为了更好的体验,请使用竖屏浏览</div>
35     </div>
36 </div>
37 </body>
38 <script src="js/index.js"></script>
39 </html>

rem:

  1. rem
    据书上说HTML根节点(html节点)的字体大小来规定rem的单位长度。

  1. flexible.js
    传说荧屏宽度明确html 节点的 font-size ,依据 手提式有线电话机dpr值设定 Viewprot
    scale的值
    如下:iphone伍s的 viewport 设置代码 (flexible.js自动生成)

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

正文首要来讲自身以后径直利用的 flexible.js+rem消除方案
以及任何1些平移端要求专注的地方

先来3个例证

先是项目结构

┌scss┐
│    ├ common ┐
│    │        ├ _public.scss
│    │        ├ _common.scss
│    │        ├ ……
│    └ style.scss
├css┐
│   └style.css
├js ┐
│   ├ plugs┐
│   │      ├ felxible.js
│   ├
├img  ┄
├config.rb  
└html┐
     ├ index.html
     ├ ……

_public.scss //_ 符号,写在scss文件前边,在 compass watch命令下
文件不会被编写翻译

其一文件重大用来存放在,rem()
px转像素的函数,以及部分集体的水彩变量,可复用的体制等!

详尽安插请跳转挪动端适配——REM等比缩放学习计算

**_common.scss **

首要用于引进compass/reset模块 ,同时引进_public.scs文件

style.scss

@charset "utf-8";  //设置scss文件字符编码 ,每个scss文件都需要
@import "compass/css3";  //引入 compass的css3模块
@import "common/_common.scss"; // 引入 预先编写的 _common.scss 文件

body{
    width:10rem; //定义body的宽度充满全屏,在_public.scss 文件 和 flexible.js 文件           //里面是将移动端屏幕平均划分为 10等分。没一份为  1rem;
}
header{
    width:10rem;
    height:rem(96); //此处嘉定设计的标题栏高度为   96px ,所以写法是将  96px 的数值
                    //传入rem() 函数中 ,scss在编译的时候回自动将其编译成rem值
}

index.html

<!DOCTYPE html> <!-- -->
<html>
    <head>
        <meta charset="UTF-8">
        <!-- 设置字符编码 -->
        <meta name='apple-touch-fullscreen' content='yes'>
        <!-- 设置在苹果手机上以应用模式启动时,是否全屏 -->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!-- ios 系统 作用未知 -->
        <meta content="fullscreen=yes,preventMove=no" name="ML-Config">
        <!-- iso 系统 作用未知 -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <!-- iso 系统 作用未知 -->
        <meta name="format-detection" content="telephone=no,email=no,address=no" />
        <!-- 是否识别 手机号码、 电子邮件 地址 等-->
        <title>演示</title>
        <script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
        <!-- 引入 flexible.js 必须在css之前引入 ,否则会引起屏幕闪烁 -->
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <!-- 引入编译好的css -->
    </head>
    <body>

    </body>
</html>

好了骨干设置完毕,能够放心的使用量到的px值来写布局了。其余的flexible.js
和 compass 会帮您解决

请小心如下壹些

_common.scss中

body{
    background-color: #eee;
    width: 10rem;
    max-width: 10rem; //为了屏幕超出了宽度后,页面最大值为10rem
    margin: 0 auto; // 屏幕超宽后 body内容居中显示
    font-size: $font22; 
    font-family:Helvetica,STHeiti,sans-serif;
    color: #333333;
    @include user-select(text);  //用户选择操作限制  ,避免用户选择文本以外的范围
    @include opacity(0);  //入场动画初始值设定
    @include transition(all 0.5s); //入场动画效果设定
}
input,button,select{  //去掉安卓 和苹果给定的默认效果,方便自定义
    border: none;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color:rgba(255,255,255,0);
    font-size: $font20;
}

品种起首编制前 ,请在 项目根目录 也等于 config.rb 目录下 运转命令行窗口
(PS:shift+鼠标右键) 并且输入 compass watch
命令,来监听scss文件变化 ,在每一次保存scss 文件的时候,compass会自动编译scss文件夹中的文件到css目录下

当今移动端多显示器适配方案有Media Query(媒介查询) 和
rem三种,相对于Media Query来说 ,Rem 中
flexible.js
更切合懒人操作。

css开首化代码

css开首化代码

问题:

  1. 平时设计图的单位都以px,而我们使用rem单位今后,就关系到了,px单位转换为rem单位;

  2. 在页面加载的时候,大概会油但是生一次闪动

 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 }
13 
14 body {
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 }
29 
30 h1, h2, h3, h4, h5, h6 {
31     font-size: 100%
32 }
33 
34 form {
35     display: inline
36 }
37 
38 ul, ol {
39     list-style: none
40 }
41 
42 a {
43     text-decoration: none;
44     color: #1a1a1a
45 }
46 
47 a:hover, a:active, a:focus {
48     color: #1c5aa2;
49     text-decoration: none;
50 }
51 
52 a:active {
53     color: #aaa;
54 }
55 a, img {
56     -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
57 }
58 img {
59     vertical-align: middle;
60     border: 0;
61     -ms-interpolation-mode: bicubic;
62 }
63 
64 button, input, select, textarea {
65     font-size: 100%;
66     vertical-align: middle;
67     outline: none;
68 }
69 
70 textarea {
71     resize: none
72 }
73 
74 button, input[type="button"], input[type="reset"], input[type="submit"] {
75     cursor: pointer;
76     -webkit-appearance: button;
77     -moz-appearance: button
78 }
79 
80 input:focus:-moz-placeholder, input:focus::-webkit-input-placeholder {
81     color: transparent
82 }
83 
84 button::-moz-focus-inner, input::-moz-focus-inner {
85     padding: 0;
86     border: 0
87 }
88 
89 table {
90     border-collapse: collapse;
91     border-spacing: 0
92 }
 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 }
13 
14 body {
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 }
29 
30 h1, h2, h3, h4, h5, h6 {
31     font-size: 100%
32 }
33 
34 form {
35     display: inline
36 }
37 
38 ul, ol {
39     list-style: none
40 }
41 
42 a {
43     text-decoration: none;
44     color: #1a1a1a
45 }
46 
47 a:hover, a:active, a:focus {
48     color: #1c5aa2;
49     text-decoration: none;
50 }
51 
52 a:active {
53     color: #aaa;
54 }
55 a, img {
56     -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
57 }
58 img {
59     vertical-align: middle;
60     border: 0;
61     -ms-interpolation-mode: bicubic;
62 }
63 
64 button, input, select, textarea {
65     font-size: 100%;
66     vertical-align: middle;
67     outline: none;
68 }
69 
70 textarea {
71     resize: none
72 }
73 
74 button, input[type="button"], input[type="reset"], input[type="submit"] {
75     cursor: pointer;
76     -webkit-appearance: button;
77     -moz-appearance: button
78 }
79 
80 input:focus:-moz-placeholder, input:focus::-webkit-input-placeholder {
81     color: transparent
82 }
83 
84 button::-moz-focus-inner, input::-moz-focus-inner {
85     padding: 0;
86     border: 0
87 }
88 
89 table {
90     border-collapse: collapse;
91     border-spacing: 0
92 }
px单位转rem单位消除措施

style.scss

//设计图宽度 640px 等分为10等分
/**
 * rem单位长度
 */
$fontSize: 64;

/**
 * 将px数值转换成rem数值的函数
 * @param $n px数值 
 */

@function rem($n) {
  @return ($n / $fontSize) * 1rem;
}

div{
    width:rem(640);
    height:rem(128);
}       

参数表明:

$fontSize
rem单位长度,那是一流图景下的数值,依照设计图鲜明,计算方法:设计宽度/等分份数

$n px数值,有规划标注 ,恐怕,页面制作前自身标明。

style.css

div{
    width:10rem;
    height:2rem;
}

经过compass编写翻译之后会获得如上海教室的结果

当然,flexible.js
也是内需设置的,如下图部分数值需求和scss中等学校函授数的数值对应

function t() {
    var t = o.getBoundingClientRect().width;
    t / i > 640 && (t = 640 * i), e.rem = t / 10, o.style.fontSize = e.rem + "px"
}

图中有几个640的数值,此处对应的是设计图宽度为640,
另有1处数值为十情趣是将显示器分为十等分,
次数八个数值 能得上文中
$fontSize = 640/10 = 64;

加载动画,选择横竖屏突显css代码

加载动画,选取横竖屏展现css代码

加载时荧屏闪动的标题

讲flexlibe.js文件放置在css样式文件从前加载,那样可以有效的滑坡荧屏闪动情状的面世

父文中,有关于compass 以及 flexible.js下载地址或相关介绍
前端技术
App开发记

  1 .box{
  2     width:100%;
  3     height:100%;
  4     background-color: #0abdff;
  5     /*height:1010px;*/
  6     overflow: hidden;
  7 }
  8 
  9 /*加载进度样式*/
 10 .load {
 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 }
 22 
 23 .con-load {
 24     position: relative;
 25     width: 100px;
 26     height: 100px;
 27 }
 28 
 29 .load img {
 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 }
 38 
 39 .load p {
 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 }
 52 
 53 /*加载进度动画*/
 54 @-webkit-keyframes rotate {
 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 }
 71 
 72 @keyframes rotate {
 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 }
 89 /*横竖屏代码*/
 90 /* 样式放在结尾,防止 base64 图片造成拥塞 */
 91 @-webkit-keyframes rotation {
 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 }
109 
110 @keyframes rotation {
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 }
128 
129 #orientLayer {
130     display: none;
131 }
132 
133 @media screen and (min-aspect-ratio: 13/9) {
134     #orientLayer {
135         display: block;
136     }
137 
138     body {
139         width: 100%;
140         height: 100%;
141     }
142 }
143 
144 .mod-orient-layer {
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 }
156 
157 .mod-orient-layer__content {
158     position: absolute;
159     width: 100%;
160     top: 45%;
161     margin-top: -75px;
162     text-align: center
163 }
164 
165 .mod-orient-layer__icon-orient {
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 }
177 
178 .mod-orient-layer__desc {
179     margin-top: 20px;
180     font-size: 15px;
181     color: #fff
182 }
  1 .box{
  2     width:100%;
  3     height:100%;
  4     background-color: #0abdff;
  5     /*height:1010px;*/
  6     overflow: hidden;
  7 }
  8 
  9 /*加载进度样式*/
 10 .load {
 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 }
 22 
 23 .con-load {
 24     position: relative;
 25     width: 100px;
 26     height: 100px;
 27 }
 28 
 29 .load img {
 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 }
 38 
 39 .load p {
 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 }
 52 
 53 /*加载进度动画*/
 54 @-webkit-keyframes rotate {
 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 }
 71 
 72 @keyframes rotate {
 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 }
 89 /*横竖屏代码*/
 90 /* 样式放在结尾,防止 base64 图片造成拥塞 */
 91 @-webkit-keyframes rotation {
 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 }
109 
110 @keyframes rotation {
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 }
128 
129 #orientLayer {
130     display: none;
131 }
132 
133 @media screen and (min-aspect-ratio: 13/9) {
134     #orientLayer {
135         display: block;
136     }
137 
138     body {
139         width: 100%;
140         height: 100%;
141     }
142 }
143 
144 .mod-orient-layer {
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 }
156 
157 .mod-orient-layer__content {
158     position: absolute;
159     width: 100%;
160     top: 45%;
161     margin-top: -75px;
162     text-align: center
163 }
164 
165 .mod-orient-layer__icon-orient {
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 }
177 
178 .mod-orient-layer__desc {
179     margin-top: 20px;
180     font-size: 15px;
181     color: #fff
182 }

顶点检验与能源预加载js代码

极端检查实验与财富预加载js代码

 1 /**
 2  * Created by w on 2016/8/16.
 3  */
 4 //    终端检测函数
 5 var ua = parseUA();
 6 function parseUA() {
 7     var u = navigator.userAgent;
 8     var u2 = navigator.userAgent.toLowerCase();
 9     return { //移动终端浏览器版本信息
10         trident: u.indexOf('Trident') > -1, //IE内核
11         presto: u.indexOf('Presto') > -1, //opera内核
12         webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
13         gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
14         mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
15         ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
16         android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
17         iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
18         iPad: u.indexOf('iPad') > -1, //是否iPad
19         webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
20         iosv: u.substr(u.indexOf('iPhone OS') + 9, 3),
21         weixin: u2.match(/MicroMessenger/i) == "micromessenger",
22         taobao: u.indexOf('AliApp(TB') > -1,
23     };
24 }
25 // 资源预加载   图片,音频,视频,js,css等文件资源都可以
26 var images = new Array();
27 preload(
28     "http://stg-smartlearning.com/download/css3d-engine-master/img/yauncheng.png",
29     "http://stg-smartlearning.com/download/css3d-engine-master/img/dupian.png",
30     "http://stg-smartlearning.com/download/css3d-engine-master/img/feidaoshoushu.png",
31     "http://stg-smartlearning.com/download/css3d-engine-master/img/yuanchengkanhu.png",
32     "http://stg-smartlearning.com/download/css3d-engine-master/img/shangmentiyan.png",
33     "http://stg-smartlearning.com/download/css3d-engine-master/img/yihudaojia.png",
34     "http://www.stg-smartlearning.com/download/city/video/guSheng.mp3",
35     "http://www.stg-smartlearning.com/download/www/city/video/flash1.mp4",
36     "http://www.stg-smartlearning.com/download/www/city/video/flash2.mp4",
37     "http://www.stg-smartlearning.com/download/www/city/video/haitong.mp4",
38     "http://www.stg-smartlearning.com/download/www/city/video/hang1.mp4",
39     "http://www.stg-smartlearning.com/download/www/city/img/1241362.jpg",
40     "http://www.stg-smartlearning.com/download/www/city/img/haitong.png",
41     "http://www.stg-smartlearning.com/download/www/city/img/ht.png"
42 );
43 function preload() {
44     for (i = 0; i < preload.arguments.length; i++) {
45         images[i] = new Image();
46         images[i].src = preload.arguments[i]
47     }
48 }
 1 /**
 2  * Created by w on 2016/8/16.
 3  */
 4 //    终端检测函数
 5 var ua = parseUA();
 6 function parseUA() {
 7     var u = navigator.userAgent;
 8     var u2 = navigator.userAgent.toLowerCase();
 9     return { //移动终端浏览器版本信息
10         trident: u.indexOf('Trident') > -1, //IE内核
11         presto: u.indexOf('Presto') > -1, //opera内核
12         webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
13         gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
14         mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
15         ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
16         android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
17         iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
18         iPad: u.indexOf('iPad') > -1, //是否iPad
19         webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
20         iosv: u.substr(u.indexOf('iPhone OS') + 9, 3),
21         weixin: u2.match(/MicroMessenger/i) == "micromessenger",
22         taobao: u.indexOf('AliApp(TB') > -1,
23     };
24 }
25 // 资源预加载   图片,音频,视频,js,css等文件资源都可以
26 var images = new Array();
27 preload(
28     "http://stg-smartlearning.com/download/css3d-engine-master/img/yauncheng.png",
29     "http://stg-smartlearning.com/download/css3d-engine-master/img/dupian.png",
30     "http://stg-smartlearning.com/download/css3d-engine-master/img/feidaoshoushu.png",
31     "http://stg-smartlearning.com/download/css3d-engine-master/img/yuanchengkanhu.png",
32     "http://stg-smartlearning.com/download/css3d-engine-master/img/shangmentiyan.png",
33     "http://stg-smartlearning.com/download/css3d-engine-master/img/yihudaojia.png",
34     "http://www.stg-smartlearning.com/download/city/video/guSheng.mp3",
35     "http://www.stg-smartlearning.com/download/www/city/video/flash1.mp4",
36     "http://www.stg-smartlearning.com/download/www/city/video/flash2.mp4",
37     "http://www.stg-smartlearning.com/download/www/city/video/haitong.mp4",
38     "http://www.stg-smartlearning.com/download/www/city/video/hang1.mp4",
39     "http://www.stg-smartlearning.com/download/www/city/img/1241362.jpg",
40     "http://www.stg-smartlearning.com/download/www/city/img/haitong.png",
41     "http://www.stg-smartlearning.com/download/www/city/img/ht.png"
42 );
43 function preload() {
44     for (i = 0; i < preload.arguments.length; i++) {
45         images[i] = new Image();
46         images[i].src = preload.arguments[i]
47     }
48 }

显示器适配js代码

显示器适配js代码

/**
 * Created by w on 2016/7/18.
 */
/**
 * MobileWeb 通用功能助手,包含常用的 UA 判断、页面适配、search 参数转 键值对。
 * 该 JS 应在 head 中尽可能早的引入,减少重绘。
 *
 * fixScreen 方法根据两种情况适配,该方法自动执行。
 *      1. 定宽: 对应 meta 标签写法 -- <meta name="viewport" content="width=750">
 *          该方法会提取 width 值,主动添加 scale 相关属性值。
 *          注意: 如果 meta 标签中指定了 initial-scale, 该方法将不做处理(即不执行)。
 *      2. REM: 不用写 meta 标签,该方法根据 dpr 自动生成,并在 html 标签中加上 data-dpr 和 font-size 两个属性值。
 *          该方法约束:IOS 系统最大 dpr = 3,其它系统 dpr = 1,页面每 dpr 最大宽度(即页面宽度/dpr) = 750,REM 换算比值为 16。
 *          对应 css 开发,任何弹性尺寸均使用 rem 单位,rem 默认宽度为 视觉稿宽度 / 16;
 *              scss 中 $ppr(pixel per rem) 变量写法 -- $ppr: 750px/16/1rem;
 *                      元素尺寸写法 -- html { font-size: $ppr*1rem; } body { width: 750px/$ppr; }。

 */
window.mobileUtil = (function(win, doc) {
    var UA = navigator.userAgent,
        isAndroid = /android|adr/gi.test(UA),
        isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, // 据说某些国产机的UA会同时包含 android iphone 字符
        isMobile = isAndroid || isIos;  // 粗略的判断

    return {
        isAndroid: isAndroid,
        isIos: isIos,
        isMobile: isMobile,

        isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA),
        isWeixin: /MicroMessenger/gi.test(UA),
        isQQ: /QQ\/\d/gi.test(UA),
        isYixin: /YiXin/gi.test(UA),
        isWeibo: /Weibo/gi.test(UA),
        isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),

        tapEvent: isMobile ? 'tap' : 'click',

        /**
         * 缩放页面
         */
        fixScreen: function() {
            var metaEl = doc.querySelector('meta[name="viewport"]'),
                metaCtt = metaEl ? metaEl.content : '',
                matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
                matchWidth = metaCtt.match(/width=([^,\s]+)/);

            if ( !metaEl ) { // REM
                var docEl = doc.documentElement,
                    maxwidth = docEl.dataset.mw || 640, // 每 dpr 最大页面宽度
                    dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
                    scale = 1 / dpr,
                    tid;

                docEl.removeAttribute('data-mw');
                docEl.dataset.dpr = dpr;
                metaEl = doc.createElement('meta');
                metaEl.name = 'viewport';
                metaEl.content = fillScale(scale);
                docEl.firstElementChild.appendChild(metaEl);

                var refreshRem = function() {
                    var width = docEl.getBoundingClientRect().width;
                    if (width / dpr > maxwidth) {
                        width = maxwidth * dpr;
                    }
                    var rem = width / 16;
                    docEl.style.fontSize = rem + 'px';
                };

                win.addEventListener('resize', function() {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }, false);
                win.addEventListener('pageshow', function(e) {
                    if (e.persisted) {
                        clearTimeout(tid);
                        tid = setTimeout(refreshRem, 300);
                    }
                }, false);

                refreshRem();
            } else if ( isMobile && !matchScale && ( matchWidth && matchWidth[1] != 'device-width' ) ) { // 定宽
                var    width = parseInt(matchWidth[1]),
                    iw = win.innerWidth || width,
                    ow = win.outerWidth || iw,
                    sw = win.screen.width || iw,
                    saw = win.screen.availWidth || iw,
                    ih = win.innerHeight || width,
                    oh = win.outerHeight || ih,
                    ish = win.screen.height || ih,
                    sah = win.screen.availHeight || ih,
                    w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
                    scale = w / width;

                if ( scale < 1 ) {
                    metaEl.content = metaCtt + ',' + fillScale(scale);
                }
            }

            function fillScale(scale) {
                return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';
            }
        },

        /**
         * 转href参数成键值对
         * @param href {string} 指定的href,默认为当前页href
         * @returns {object} 键值对
         */
        getSearch: function(href) {
            href = href || win.location.search;
            var data = {},reg = new RegExp( "([^?=&]+)(=([^&]*))?", "g" );
            href && href.replace(reg,function( $0, $1, $2, $3 ){
                data[ $1 ] = $3;
            });
            return data;
        }
    };
})(window, document);

// 默认直接适配页面
mobileUtil.fixScreen();
/**
 * Created by w on 2016/7/18.
 */
/**
 * MobileWeb 通用功能助手,包含常用的 UA 判断、页面适配、search 参数转 键值对。
 * 该 JS 应在 head 中尽可能早的引入,减少重绘。
 *
 * fixScreen 方法根据两种情况适配,该方法自动执行。
 *      1. 定宽: 对应 meta 标签写法 -- <meta name="viewport" content="width=750">
 *          该方法会提取 width 值,主动添加 scale 相关属性值。
 *          注意: 如果 meta 标签中指定了 initial-scale, 该方法将不做处理(即不执行)。
 *      2. REM: 不用写 meta 标签,该方法根据 dpr 自动生成,并在 html 标签中加上 data-dpr 和 font-size 两个属性值。
 *          该方法约束:IOS 系统最大 dpr = 3,其它系统 dpr = 1,页面每 dpr 最大宽度(即页面宽度/dpr) = 750,REM 换算比值为 16。
 *          对应 css 开发,任何弹性尺寸均使用 rem 单位,rem 默认宽度为 视觉稿宽度 / 16;
 *              scss 中 $ppr(pixel per rem) 变量写法 -- $ppr: 750px/16/1rem;
 *                      元素尺寸写法 -- html { font-size: $ppr*1rem; } body { width: 750px/$ppr; }。

 */
window.mobileUtil = (function(win, doc) {
    var UA = navigator.userAgent,
        isAndroid = /android|adr/gi.test(UA),
        isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, // 据说某些国产机的UA会同时包含 android iphone 字符
        isMobile = isAndroid || isIos;  // 粗略的判断

    return {
        isAndroid: isAndroid,
        isIos: isIos,
        isMobile: isMobile,

        isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA),
        isWeixin: /MicroMessenger/gi.test(UA),
        isQQ: /QQ\/\d/gi.test(UA),
        isYixin: /YiXin/gi.test(UA),
        isWeibo: /Weibo/gi.test(UA),
        isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),

        tapEvent: isMobile ? 'tap' : 'click',

        /**
         * 缩放页面
         */
        fixScreen: function() {
            var metaEl = doc.querySelector('meta[name="viewport"]'),
                metaCtt = metaEl ? metaEl.content : '',
                matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
                matchWidth = metaCtt.match(/width=([^,\s]+)/);

            if ( !metaEl ) { // REM
                var docEl = doc.documentElement,
                    maxwidth = docEl.dataset.mw || 640, // 每 dpr 最大页面宽度
                    dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
                    scale = 1 / dpr,
                    tid;

                docEl.removeAttribute('data-mw');
                docEl.dataset.dpr = dpr;
                metaEl = doc.createElement('meta');
                metaEl.name = 'viewport';
                metaEl.content = fillScale(scale);
                docEl.firstElementChild.appendChild(metaEl);

                var refreshRem = function() {
                    var width = docEl.getBoundingClientRect().width;
                    if (width / dpr > maxwidth) {
                        width = maxwidth * dpr;
                    }
                    var rem = width / 16;
                    docEl.style.fontSize = rem + 'px';
                };

                win.addEventListener('resize', function() {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }, false);
                win.addEventListener('pageshow', function(e) {
                    if (e.persisted) {
                        clearTimeout(tid);
                        tid = setTimeout(refreshRem, 300);
                    }
                }, false);

                refreshRem();
            } else if ( isMobile && !matchScale && ( matchWidth && matchWidth[1] != 'device-width' ) ) { // 定宽
                var    width = parseInt(matchWidth[1]),
                    iw = win.innerWidth || width,
                    ow = win.outerWidth || iw,
                    sw = win.screen.width || iw,
                    saw = win.screen.availWidth || iw,
                    ih = win.innerHeight || width,
                    oh = win.outerHeight || ih,
                    ish = win.screen.height || ih,
                    sah = win.screen.availHeight || ih,
                    w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
                    scale = w / width;

                if ( scale < 1 ) {
                    metaEl.content = metaCtt + ',' + fillScale(scale);
                }
            }

            function fillScale(scale) {
                return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';
            }
        },

        /**
         * 转href参数成键值对
         * @param href {string} 指定的href,默认为当前页href
         * @returns {object} 键值对
         */
        getSearch: function(href) {
            href = href || win.location.search;
            var data = {},reg = new RegExp( "([^?=&]+)(=([^&]*))?", "g" );
            href && href.replace(reg,function( $0, $1, $2, $3 ){
                data[ $1 ] = $3;
            });
            return data;
        }
    };
})(window, document);

// 默认直接适配页面
mobileUtil.fixScreen();

 全数代码打包下载:

 全数代码打包下载:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有