移动端页面

1.引入jquery.js和adaptive.js

adaptive.js

(function (win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    // 设备像素比
    var devicePixelRatio = win.devicePixelRatio;
    // 我们设置的布局视口与理想视口的像素比
    var dpr = 1;
    // viewport缩放值
    var scale = 1;
    // 设置viewport
    function setViewport() {
        // 判断IOS
        var isIPhone = /iphone/gi.test(win.navigator.appVersion);
        // 布局视口与理想视口的值与设备像素比相等 只针对iphone
        if (isIPhone) {
            //  if (devicePixelRatio >= 3) {
//                dpr = 3;
//            }
//            else if (devicePixelRatio === 2) {
//                dpr = 2;
//            }
//            else {
//                dpr = 1;
//            }
//        }
//        else {
            dpr = 1;
        }
        // window对象上增加一个属性，提供对外的布局视口与理想视口的值
        win.devicePixelRatioValue = dpr;
        // viewport缩放值，布局视口缩放后刚好显示成理想视口的宽度，页面就不会过长或过短了
        scale = 1 / dpr;
        // 获取已有的viewport
        var hasMetaEl = doc.querySelector('meta[name="viewport"]');
        // 如果有，改变之
        if (hasMetaEl) {
            // ios9 不用设置 maximum-scale minimum-scale，否则页面会出现可左右拖动的效果，IOS9的bug或者故意为之？
            if (isIPhone) {
                hasMetaEl.setAttribute('content', 'initial-scale=' + scale + ', user-scalable=no');
            }
            // target-densitydpi 目标设备密度等级，默认值medium-dpi，我们的目标是css中的1px会等于物理像素中的1px，故使用target-densitydpi=device-dpi
            else {
                hasMetaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
            }
        }
        // 如果没有，添加之
        else {
            var metaEl = doc.createElement('meta');
            metaEl.setAttribute('name', 'viewport');
            if (isIPhone) {
                metaEl.setAttribute('content', 'initial-scale=' + scale + ', user-scalable=no');
            }
            else {
                metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
            }

            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(metaEl);
            }
            else {
                var wrap = doc.createElement('div');
                wrap.appendChild(metaEl);
                doc.write(wrap.innerHTML);
            }
        }
    }
    setViewport();
    var newBase = 100;
    lib.errDpr = 1;

    function setRem() {
        // 布局视口
        // var layoutView = docEl.clientWidth; 也可以 获取布局视口的宽度
        var layoutView;
        if (lib.maxWidth) {
            layoutView = Math.min(docEl.getBoundingClientRect().width, lib.maxWidth * dpr);
        }
        else {
            layoutView = docEl.getBoundingClientRect().width;
        }
        // 为了计算方便，我们规定 1rem === 100px设计图像素，我们切图的时候就能快速转换
        // 有人问，为什么不让1rem === 1px设计像素呢？
        // 设计图一般是640或者750px
        // 布局视口一般是320到1440
        // 计算一个值，使layout的总宽度为 (desinWidth/100) rem
        // 那么有计算公式：layoutView / newBase = desinWidth / 100
        // newBase = 100 * layoutView / desinWidth
        // newBase = 介于50到200之间
        // 如果 1rem === 1px 设计像素，newBase就介于0.5到2之间，由于很多浏览器有最小12px限制，这个时候就不能自适应了
        newBase = 100 * layoutView / lib.desinWidth * (lib.errDpr || 1);
        docEl.style.fontSize = newBase + 'px';
        // rem基准值改变后，手动reflow一下，避免旋转手机后页面自适应问题
        doc.body&&(doc.body.style.fontSize = lib.baseFont / 100 + 'rem');
        // 重新设置rem后的回调方法
        lib.setRemCallback&&lib.setRemCallback();
        lib.newBase = newBase;
    }
    var tid;
    lib.desinWidth = 640;
    lib.baseFont = 24;
    // 局部刷新的时候部分chrome版本字体过大的问题
    lib.reflow = function() {
        docEl.clientWidth;
    };
    // 检查安卓下rem值是否显示正确
    function checkRem() {
        if (/android/ig.test(window.navigator.appVersion)) {
            var hideDiv = document.createElement('p');
            hideDiv.style.height = '1px';
            hideDiv.style.width = '2.5rem';
            hideDiv.style.visibility = 'hidden';
            document.body.appendChild(hideDiv);
            var now = hideDiv.offsetWidth;
            var right = window.adaptive.newBase * 2.5;
            if (Math.abs(right / now - 1) > 0.05) {
                lib.errDpr = right / now;
                setRem();
            }
            document.body.removeChild(hideDiv);
        }
    }
    lib.init = function () {
        // resize的时候重新设置rem基准值
        // 触发orientationchange 事件时也会触发resize，故不需要再添加此事件了
        win.addEventListener('resize', function () {
            clearTimeout(tid);
            tid = setTimeout(setRem, 300);
        }, false);
        // 浏览器缓存中读取时也需要重新设置rem基准值
        win.addEventListener('pageshow', function (e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(setRem, 300);
            }
        }, false);
        // 设置body上的字体大小
        if (doc.readyState === 'complete') {
            doc.body.style.fontSize = lib.baseFont / 100 + 'rem';
            checkRem();
        }
        else {
            doc.addEventListener('DOMContentLoaded', function (e) {
                doc.body.style.fontSize = lib.baseFont / 100 + 'rem';
                checkRem();
            }, false);
        }
        // 设置rem值
        setRem();
        // html节点设置布局视口与理想视口的像素比
        docEl.setAttribute('data-dpr', dpr);
    };
    // 有些html元素只能以px为单位，所以需要提供一个接口，把rem单位换算成px
    lib.remToPx = function (remValue) {
        return remValue * newBase;
    };
})(window, window['adaptive'] || (window['adaptive'] = {}));

2.页面写入

 <script>
    window['adaptive'].desinWidth = 640;// 设计图宽度
    window['adaptive'].baseFont = 18;// 没有缩放时的字体大小
    window['adaptive'].init();// 调用初始化方法
</script>

3.public.css

@charset "utf-8";
/*css reset*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td{margin:0; padding:0;}
/*html{overflow-x:hidden;}
body{*overflow-x:hidden;}*/
body{font-family:"微软雅黑",Arial,Verdana, Geneva, sans-serif;color:#333;}
img{vertical-align:top;border:0;}
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
a:link {color:#333;}      /* 未被访问的链接 */
a:visited {color:#333;}    /* 已被访问的链接 */
button,input[type="submit"],input[type="reset"],input[type="button"]{cursor:pointer;}
select,input,textarea{font-size:12px;}
small{font-size:12px;}
/*文字排版*/
/*
a:focus{-moz-outline-style:none; outline:none;
透明度：
filter:Alpha(opacity=70);
opacity:0.7;

两端对齐：
text-align:justify;
text-justify:inter-ideograph;
*/
.f10{font-size:10px;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f22{font-size:22px;}
.f24{font-size:24px;}
.fb{font-weight:bold;}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%;}
.lh180{line-height:180%;}
.lh200{line-height:200%;}
.unl{text-decoration:underline;}
.no-unl{text-decoration:none;}
.alpha5{filter:Alpha(opacity=50); opacity:0.5;}
.alpha6{filter:Alpha(opacity=60); opacity:0.6;}
.alpha7{filter:Alpha(opacity=70); opacity:0.7;}
.alpha8{filter:Alpha(opacity=80); opacity:0.8;}
.alpha9{filter:Alpha(opacity=90); opacity:0.9;}


/*定位*/
.tr{text-align:right;}
.tc{text-align:center;}
.tl{text-align:left;}
.bc{margin-left:auto; margin-right:auto;}
.fl{float:left; display:inline;}
.fr{float:right; display:inline;}
.cr{clear:right;}
.cb{clear:both;}
.cl{clear:left;}
.c{display:block; zoom:1;}
.c:after{content:"."; display:block; visibility:hidden; height:0; clear:both;}
/*
.c:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.c{display:inline-block;}
* html .c{height:1%;}
.c{display:block;}
*/
.vm{vertical-align:middle;}
.pr{position:relative;}
.pa{position:absolute;}
.abs-right{position:absolute; right:0;}
.zoom{zoom:1;}
.hidden{visibility:hidden;}
.none{display:none;}

/*长度高度*/
.w{width:100%;}
.h{height:100%;}
.auto{min-height:1px; height:auto!important; height:1px;}
.input-check{width:13px; height:13px;}

/*边距*/
.m5{margin:5px;}
.m10{margin:10px;}
.m15{margin:15px;}
.m20{margin:20px;}
.m25{margin:25px;}
.m30{margin:30px;}

.mt3{margin-top:3px;}
.mt4{margin-top:4px;}
.mt5{margin-top:5px;}
.mt6{margin-top:6px;}
.mt7{margin-top:7px;}
.mt8{margin-top:8px;}
.mt9{margin-top:9px;}
.mt10{margin-top:10px;}
.mt11{margin-top:11px;}
.mt12{margin-top:12px;}
.mt13{margin-top:13px;}
.mt14{margin-top:14px;}
.mt15{margin-top:15px;}
.mt18{margin-top:18px;}
.mt20{margin-top:20px;}
.mt25{margin-top:25px;}
.mt30{margin-top:30px;}
.mt35{margin-top:35px;}
.mt40{margin-top:40px;}
.mt45{margin-top:45px;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}
.mt80{margin-top:80px;}
.mt100{margin-top:100px;}

.mr3{margin-right:3px;}
.mr4{margin-right:4px;}
.mr5{margin-right:5px;}
.mr6{margin-right:6px;}
.mr7{margin-right:7px;}
.mr8{margin-right:8px;}
.mr9{margin-right:9px;}
.mr10{margin-right:10px;}
.mr11{margin-right:11px;}
.mr12{margin-right:12px;}
.mr13{margin-right:13px;}
.mr14{margin-right:14px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr25{margin-right:25px;}
.mr30{margin-right:30px;}
.mr35{margin-right:35px;}
.mr40{margin-right:40px;}
.mr45{margin-right:45px;}
.mr50{margin-right:50px;}
.mr100{margin-right:100px;}

.mb3{margin-bottom:3px;}
.mb4{margin-bottom:4px;}
.mb5{margin-bottom:5px;}
.mb6{margin-bottom:6px;}
.mb7{margin-bottom:7px;}
.mb8{margin-bottom:8px;}
.mb9{margin-bottom:9px;}
.mb10{margin-bottom:10px;}
.mb11{margin-bottom:11px;}
.mb12{margin-bottom:12px;}
.mb13{margin-bottom:13px;}
.mb14{margin-bottom:14px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb25{margin-bottom:25px;}
.mb30{margin-bottom:30px;}
.mb35{margin-bottom:35px;}
.mb40{margin-bottom:40px;}
.mb45{margin-bottom:45px;}
.mb50{margin-bottom:50px;}

.mb100{margin-bottom:100px;}

.ml3{margin-left:3px;}
.ml4{margin-left:4px;}
.ml5{margin-left:5px;}
.ml6{margin-left:6px;}
.ml7{margin-left:7px;}
.ml8{margin-left:8px;}
.ml9{margin-left:9px;}
.ml10{margin-left:10px;}
.ml11{margin-left:11px;}
.ml12{margin-left:12px;}
.ml13{margin-left:13px;}
.ml14{margin-left:14px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml25{margin-left:25px;}
.ml30{margin-left:30px;}
.ml35{margin-left:35px;}
.ml40{margin-left:40px;}
.ml45{margin-left:45px;}
.ml50{margin-left:50px;}
.ml100{margin-left:100px;}

.p5{padding:5px;}
.p10{padding:10px;}
.p15{padding:15px;}
.p20{padding:20px;}
.p25{padding:25px;}
.p30{padding:30px;}

.pt3{padding-top:3px;}
.pt4{padding-top:4px;}
.pt5{padding-top:5px;}
.pt6{padding-top:6px;}
.pt7{padding-top:7px;}
.pt8{padding-top:8px;}
.pt9{padding-top:9px;}
.pt10{padding-top:10px;}
.pt11{padding-top:11px;}
.pt12{padding-top:12px;}
.pt13{padding-top:13px;}
.pt14{padding-top:14px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt25{padding-top:25px;}
.pt30{padding-top:30px;}
.pt35{padding-top:35px;}
.pt40{padding-top:40px;}
.pt45{padding-top:45px;}
.pt50{padding-top:50px;}

.pr3{padding-right:3px;}
.pr4{padding-right:4px;}
.pr5{padding-right:5px;}
.pr6{padding-right:6px;}
.pr7{padding-right:7px;}
.pr8{padding-right:8px;}
.pr9{padding-right:9px;}
.pr10{padding-right:10px;}
.pr11{padding-right:11px;}
.pr12{padding-right:12px;}
.pr13{padding-right:13px;}
.pr14{padding-right:14px;}
.pr15{padding-right:15px;}
.pr20{padding-right:20px;}
.pr25{padding-right:25px;}
.pr30{padding-right:30px;}
.pr35{padding-right:35px;}
.pr40{padding-right:40px;}
.pr45{padding-right:45px;}
.pr50{padding-right:50px;}

.pb3{padding-bottom:3px;}
.pb4{padding-bottom:4px;}
.pb5{padding-bottom:5px;}
.pb6{padding-bottom:6px;}
.pb7{padding-bottom:7px;}
.pb8{padding-bottom:8px;}
.pb9{padding-bottom:9px;}
.pb10{padding-bottom:10px;}
.pb11{padding-bottom:11px;}
.pb12{padding-bottom:12px;}
.pb13{padding-bottom:13px;}
.pb14{padding-bottom:14px;}
.pb15{padding-bottom:15px;}
.pb20{padding-bottom:20px;}
.pb25{padding-bottom:25px;}
.pb30{padding-bottom:30px;}
.pb35{padding-bottom:35px;}
.pb40{padding-bottom:40px;}
.pb45{padding-bottom:45px;}
.pb50{padding-bottom:50px;}
.pb75{padding-bottom:75px;}

.pl3{padding-left:3px;}
.pl4{padding-left:4px;}
.pl5{padding-left:5px;}
.pl6{padding-left:6px;}
.pl7{padding-left:7px;}
.pl8{padding-left:8px;}
.pl9{padding-left:9px;}
.pl10{padding-left:10px;}
.pl11{padding-left:11px;}
.pl12{padding-left:12px;}
.pl13{padding-left:13px;}
.pl14{padding-left:14px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}
.pl25{padding-left:25px;}
.pl30{padding-left:30px;}
.pl35{padding-left:35px;}
.pl40{padding-left:40px;}
.pl45{padding-left:45px;}
.pl50{padding-left:50px;}

/*高度*/
.h5{ height:5px;}
.h10{ height:10px;}
.h15{ height:15px;}
.h20{ height:20px;}
.h25{ height:25px;}
.h30{ height:30px;}
.h35{ height:35px;}
.h40{ height:40px;}
.h50{ height:50px;}
.h60{ height:60px;}
.h70{ height:70px;}
.h80{ height:80px;}
.h90{ height:90px;}
.h100{ height:100px;}
.h115{ height:115px;}

ol, ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}

 

来源：CSDN

作者：九亿宅男的梦

链接：https://blog.csdn.net/Guoyu1_/article/details/102462363