欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

移动端屏幕适配

程序员文章站 2022-03-26 22:26:11
移动端适配与响应式布局的区别 简单适配原理: px自动转rem的方法: 1、sass less等 2、工程化手段 3、sublime安装插件 下载cssrem插件压缩包 https://github.com/flashlizi/cssrem sublime-首选项-浏览插件,打开插件目录packag ......

移动端适配与响应式布局的区别

移动端屏幕适配

 

 

简单适配原理:

px自动转rem的方法:

1、sass less等

2、工程化手段

3、sublime安装插件

下载cssrem插件压缩包 

sublime-首选项-浏览插件,打开插件目录packages ,把解压后的文件夹放进去

重启sublime,首选项-插件设置-cssrem-settings-user,复制这段话,然后保存

{
    "px_to_rem": 40, //px转rem的单位比例,默认为40
    "max_rem_fraction_length": 6, //px转rem的小数部分的最大长度。默认为6。
    "available_file_types": [".css", ".less", ".sass",".html"]
    //启用此插件的文件类型。默认为:[".css", ".less", ".sass"]
}

输入px时会出现下拉提示转rem,按tab键即可自动转换

 

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>简单适配原理</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        html{
            font-size:40px;
        }
        .header-container{
            width:100%;
            /*
            设计图纸中750(viewwidth)->高度100px
            人为规定1rem=viewwidth/18.75=40px(这个值不固定,选择易于转换计算的即可)
            750px(viewwidth)->100px高度->2.5rem
            375px(viewwidth)->50px高度->2.5rem*/
            height:2.5rem;
            background:rgba(222,24,27,0.9);
        }
        .main-container{
            padding:2.5rem 0;
            background:#eee;
        }
        .slider-container{
            height:9.15rem;
            background:lightgreen;
        }
        .nav-container{
            height:8.475rem;
            background:lightblue;
        }
        .recommend-container{
            height:50.0rem;
            background:pink;
        }
        .tabbar-container{
            height:2.5rem;
            background:#fff;
        }
        html,body{
            width:100%;
            height:100%;
        }
        .header-container,
        .tabbar-container{
            position: fixed;
            left:0;
            width:100%;
            z-index:1000;
        }
        .header-container{
            top:0;
        }
        .tabbar-container{
            bottom:0;
        }
    </style>
    <script src="simple.js"></script>
</head>
<body>
    <header class="header-container">
    </header>

    <div class="main-container">
        <div class="slider-container"></div>
        <nav class="nav-container"></nav>
        <div class="recommend-container"></div>
    </div>

    <div class="tabbar-container"></div>
</body>
</html>

simple.js

(function(){
    "use strict";
    
    setremunit();
    window.onresize=setremunit;

    function setremunit(){
        // 1rem=viewwidth/18.75
        var ratio=18.75;
        var docel=document.documentelement;
        var viewwidth=docel.getboundingclientrect().width || window.innerwidth;
        docel.style.fontsize=viewwidth/ratio+"px";            
    }    
})();

移动端屏幕适配

 

 

通用适配原理

简单适配原理存在的问题:

如果设置了1px的边框,在dpr=1时,边框为1;dpr=2时,边框为2;dpr=n时,边框为n

(注意,qq截取看不出,需要使用开发工具的截图capture screenshot,然后在ps里打开查看边框高度)

移动端屏幕适配

 

 

调试工具里可以添加可视化阴影,点击三个小点点

移动端屏幕适配

 

 

 

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>通用适配方案</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/icons.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="flexible.js"></script>
</head>
<body>
    <header class="header-container">
        <div class="navbar">
            <div class="navbar-left">
                <i class="iconfont icon-scan"></i>
            </div>
            <div class="navbar-center">
                <div class="searchbox">
                    <div class="searchbox-prepend">
                        <i class="iconfont icon-search"></i>
                    </div>
                    <input type="text" class="searchbox-input" placeholder="开学季有礼,好货五折起">
                    <div class="searchbox-append">
                        <i class="iconfont icon-close"></i>
                    </div>
                </div>
            </div>
            <div class="navbar-right">
                <i class="iconfont icon-msg"></i>
            </div>
        </div>
    </header>

    <div class="main-container">
        <div class="slider-container"><img src="img/slider/1.jpg"></div>
        <nav class="nav-container">
            <ul class="nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <img src="img/nav/1.png" class="nav-img">
                        <span class="nav-text">团购</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <img src="img/nav/2.png" class="nav-img">
                        <span class="nav-text">团购</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <img src="img/nav/3.png" class="nav-img">
                        <span class="nav-text">团购</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <img src="img/nav/4.png" class="nav-img">
                        <span class="nav-text">团购</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <img src="img/nav/5.png" class="nav-img">
                        <span class="nav-text">团购</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <img src="img/nav/6.png" class="nav-img">
                        <span class="nav-text">团购</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <img src="img/nav/7.png" class="nav-img">
                        <span class="nav-text">团购</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <img src="img/nav/8.png" class="nav-img">
                        <span class="nav-text">团购</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <img src="img/nav/9.png" class="nav-img">
                        <span class="nav-text">团购</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <img src="img/nav/10.png" class="nav-img">
                        <span class="nav-text">团购</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="recommend-container">
            <ul class="recommend">
                <li class="recommend-item">
                    <a href="#" class="recommend-link">
                        <p class="recommend-pic"><img src="img/recommend/1.jpg" class="recommend-img"></p>
                        <p class="recommend-name">欧派橱柜定制简约现代</p>
                        <p class="recommend-origprice">¥2000.00</p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥398.00</span>
                            <span class="recommend-count">985件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="#" class="recommend-link">
                        <p class="recommend-pic"><img src="img/recommend/2.jpg" class="recommend-img"></p>
                        <p class="recommend-name">欧派橱柜定制简约现代</p>
                        <p class="recommend-origprice">¥2000.00</p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥398.00</span>
                            <span class="recommend-count">985件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="#" class="recommend-link">
                        <p class="recommend-pic"><img src="img/recommend/3.jpg" class="recommend-img"></p>
                        <p class="recommend-name">欧派橱柜定制简约现代</p>
                        <p class="recommend-origprice">¥2000.00</p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥398.00</span>
                            <span class="recommend-count">985件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="#" class="recommend-link">
                        <p class="recommend-pic"><img src="img/recommend/4.jpg" class="recommend-img"></p>
                        <p class="recommend-name">欧派橱柜定制简约现代</p>
                        <p class="recommend-origprice">¥2000.00</p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥398.00</span>
                            <span class="recommend-count">985件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="#" class="recommend-link">
                        <p class="recommend-pic"><img src="img/recommend/5.jpg" class="recommend-img"></p>
                        <p class="recommend-name">欧派橱柜定制简约现代</p>
                        <p class="recommend-origprice">¥2000.00</p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥398.00</span>
                            <span class="recommend-count">985件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="#" class="recommend-link">
                        <p class="recommend-pic"><img src="img/recommend/6.jpg" class="recommend-img"></p>
                        <p class="recommend-name">欧派橱柜定制简约现代</p>
                        <p class="recommend-origprice">¥2000.00</p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥398.00</span>
                            <span class="recommend-count">985件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="#" class="recommend-link">
                        <p class="recommend-pic"><img src="img/recommend/7.jpg" class="recommend-img"></p>
                        <p class="recommend-name">欧派橱柜定制简约现代</p>
                        <p class="recommend-origprice">¥2000.00</p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥398.00</span>
                            <span class="recommend-count">985件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="#" class="recommend-link">
                        <p class="recommend-pic"><img src="img/recommend/8.jpg" class="recommend-img"></p>
                        <p class="recommend-name">欧派橱柜定制简约现代</p>
                        <p class="recommend-origprice">¥2000.00</p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥398.00</span>
                            <span class="recommend-count">985件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="#" class="recommend-link">
                        <p class="recommend-pic"><img src="img/recommend/9.jpg" class="recommend-img"></p>
                        <p class="recommend-name">欧派橱柜定制简约现代</p>
                        <p class="recommend-origprice">¥2000.00</p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥398.00</span>
                            <span class="recommend-count">985件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="#" class="recommend-link">
                        <p class="recommend-pic"><img src="img/recommend/10.jpg" class="recommend-img"></p>
                        <p class="recommend-name">欧派橱柜定制简约现代</p>
                        <p class="recommend-origprice">¥2000.00</p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥398.00</span>
                            <span class="recommend-count">985件已售</span>
                        </p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="tabbar-container">
        <ul class="tabbar">
            <li class="tabbar-item tabbar-item-active">
                <a href="#" class="tabbar-link">
                    <i class="iconfont icon-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="#" class="tabbar-link">
                    <i class="iconfont icon-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="#" class="tabbar-link">
                    <i class="iconfont icon-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="#" class="tabbar-link">
                    <i class="iconfont icon-home"></i>
                    <span>首页</span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

base.css

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-size: 12px;
    color: #5d655b;
}

a {
    font-size: 12px;
    color: #686868;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;/*取消点击a链接出现高亮色*/
}

input {
    font-size: 12px;
    border: none;
    background: none;
    outline: none;
}
[data-dpr="2"] body,
[data-dpr="2"] a,
[data-dpr="2"] input {
    font-size: 24px;
}
[data-dpr="3"] body,
[data-dpr="3"] a,
[data-dpr="3"] input {
    font-size: 36px;
}

li {
    list-style: none;
}

img {
    vertical-align: top;
    border: none;
    width: 100%;
}

 


icons.css

@font-face {
    font-family: "iconfont";
    src: url('../fonts/iconfont.eot?t=1522237704791');
    /* ie9*/
    src: url('../fonts/iconfont.eot?t=1522237704791#iefix') format('embedded-opentype'),
    /* ie6-ie8 */
    url('data:application/x-font-woff;charset=utf-8;base64,d09grgabaaaaabfeaasaaaaagkgaaqaaaaaaaaaaaaaaaaaaaaaaaaaaaabhu1vcaaabcaaaadmaaabcsp6z7u9tlziaaae8aaaaqgaaafzw7kpqy21hcaaaayaaaadwaaac3hdqdndnbhlmaaaccaaadecaabh09z93/mhlywqaaa64aaaamqaaadyq3yfraghlyqaaduwaaaagaaaajafza9hobxr4aaapdaaaabsaaabmtc7/+2xvy2eaaa8oaaaakaaaacgovix8bwf4caaad1aaaaadaaaaiaenamhuyw1laaapcaaaauuaaajtplt+fxbvc3qaabc4aaaaiqaaalvqptpuejxjygrgyobikgpqywb0cfmjyebgyggaajamy05meijqdmodyrgaaq4gzooiagckiwnpahicy2bkywkcwmdkwmhuyxsggyghh0izvmywyurgygbiygvmwaoc0lxtgbwykl7emdf8b2aakgwnqgfgkbwa2tsl1qaaejzfkjfuwkaqrf8gb+leiq0fdyqsqrscgjyjcbcugmqfuaefx+asf12mikrf/vjtueskitkrz+2ovjwz+wfai4cb+bafkl6qepgpborzazz3+qinnvu8a1dgw5ivg045y8sfl1xxyz2pezcp+dytlxeprarvqo5fulwv+y8rvaxeuknfj93qfrp1/yihncgxxhaj1binf1hvjyl9x+nbqppvdz1nxoakwmrpyhpygb0rwjv4m42jyehu6nxbmympymvkblgwuytle1pflzfp4nbimxbvehwori4i74z8rd4yoyt8nviy3dqg/gapw2evejylvwumhmdx7zqe/8zu7oz89np7m7md0d3ele/2e9y9dy0esr1f8kjjperjz1kiy1q0kyqmbss2ltk04wgqitkqrjmydiosgbtgbbmeaqgoashwwjij4wqika8v0/nyiglyqhq4cwzrhqnevsmkrgga5hauu7q6urqr+nv1nreiufyp9gwaira5iuytrbkbebbr4ce5alsivp2rgvmrhm9o0iiikllg1+kcel5ou41ok/restqgcuvovhqdqm5f0g7nc31ouawabd53e7o6kqafbzutfx8z3s49b04pgdhmj+oliqw7ubbkt+jpddadpiulgibzhg8k4ajnkokiivelgpfzxi6ncsxqs1fux/5eoz++99hwa4wqpwccpg1wvpz8yokzm/e7mxotdfzkjermlhgm2vcjh2szsy+e/0twt0rbr9brghknekrmxkmhzbfs7ytrpeqd10tctq5rq1thpestmdsrtptoebzkpfcrixoi6/cicx9n7hinj446in4hsr+mx+f7vabtgmb9bz4i2kfwu9bboxjfyd92vvqgjn0hgjm6kv/qdnnm7jex5uphnqzc85zhpjmr/fwu2amp2z1/o8fhgi1sb+duvt35a/fcdwh1l3zykvuahh36sh0u6swubgue8gjp0/rfab/tcylpnrgdi5jlva7phgtmoyvltoifwuukvadae+ehjsu215nrumawoe9y/etbaphyzzaeif5fxpgfuu++p/yzj57//d5y7s/u4rhds/1l+kpya7eek9z9y8v3czaz3vjaeaodwk8vxfoz36e9if7l5cvxl1cthjret+n9rwco7gv2evaidmakwbn/epmhn7e7gtpqu2n3zj20ohn2+djpbds0fhz9z56nfwijpmcrnfeqdxni+eecs69zbjubvzscjfgbgtjudrqu59iu12y4tlgj/ldv6ans1j4fybll/dbqd3au9janbdqhvvgliyxjmmtjgp2wbsbc41ktldkedasaxhvptr0pdm+aimu4cpmrro+roq8g3jmizgbmd5lthepj1soijincovgwnzjasfzwgqe/u58zdhhzz+jg6l/b+6a/qbug/swcdyk3hr+e7pdtxodguh6a6yfofio/jeuspmvdkkgdh30bcz0getjglsj7yqr5eclbd9sm84dj2mlqvehlcgitgcdgbylu2sy1q/d67n8bbh/xrfckiubvv+oqebucguqek7hmdw1+husmrvh5tn7d+kox8r3vqm9bnw/z9qfvjeel4ub1wfo8rd4o3/kkspr3ppgetlxgzcqgusb429wvesxg/gbk3q8bgviaywjxvva+nw1x8re+2eca+ppw83xusg/bbmbego3c6stqdohnse4wgfthq9enzwrggxaw916nv2mozdhq9chmsgnpd7pizdyz/ljnxslq7jpyzftfwnaw1tgbmudzuhm9yt1gdp8bqfeu7uvt5lidvudt0zbc68vgddoarix4qq58xtk+vogawxyrv88xwraxrd8srnf6fyy0hwrid/v2wlarrejjt8hohjzt27n6o0ii0mc+bfgqfuazfc48cmxaj2l8v01kfvzoabqjgkrenpafskwokgpkffocogesulhdxpjaoshgfk1t/v/wt/+f42ht6c4swfjnwkkwmj+dh4x16vsnem84ncy3vny9h1xx3tezmuc23aazfux/opiqdjh3h3qxlumau0cquaelv1ae/gh9ct0j2ngkplebbcqwmghvr4fmjnctn1pviuw2m7lz4+yz/sb9jny/sx9m1kz9luypohlxxqfpuxruweosjl4uqxo9/jsl+707kzsuf1uqgexdooeorw9aiocxupav9hgaigvcnqiiyl9saatcmalswu8qwjbxoifinyftj3wd+d/jnzi9vg1don6tmsanawtkh4a8et0xo/4jstriit+m32smgasd7zfyqjjnd+grdntgfo5qxggf4/wwshvrshtowsyiw2c48jqjlosjr/bjueociqtrdv1jdhgbs0s6ju4xxrcmz6evctcp+kr8/njiz2hj5voi8qxpxfhy2yu+fbqbajrjpzeesj/9xx1yrtizwf/4ju8/wrt90vjtvjl5het3t03cfneqttnbdxbwib3xr+gjxc5+afcsnh1m+jppio/hb8n1e6d3wa9/w5yuntj3ny82kfqpxrcep++j/zizfskisxoyhatn9g+lmbynnazymuv//bv9bwojrk6q30ondg/pblpur4qe1wgbevcrgilqierhhjuyauidqiyjafmyuyrcqwzwgkhlcuvgepkifcpwonvsdbzqh+eyagmmghjimdj+soaqpef+f+am+dma52hebmh3b+jdadiaeqvq9fz2wwcchbelggvbvjhuzvstfhkpkrb97nao297feli8n0hsb+gkzd3ec1upsf/td2qarzoftvjpvb1psah3csbve4shkgbjfnrca7iswkf1icypxfrxdja5vv7kerst8x9tebg/mxfvvhtlumj6yjptlvovvzzvfnlvporx4wh+rraxnx9qfdp9dpepmbffpnpx7izuzsuu3eetcz5pwfbuzblhlc34rqmhiiw1bst7lvu7ihpvv+qtan2ylffhkmwblfex7hty8kiswhpk6cj+tgsrwj/ajuoneggrao/2hlbvjiwqpyxotadu+z7fm0vbwxueo6yyo4tfxrvztvsqlz5ocqqdvpsvzyvdrz44mrarny+ukkqzrhf2nlimez37z+othw82wnkcluatb0sggh8bjjyndzcxgavuvoepjypzpx5mh0oprhxwz1z0eejpwt2zsgi+zprijb9jnjm7i9jrgp19gtnfjbpbycgcprw18vagfqqcj7k70xzmy+xwvlkcy5dlixmdfury4rwbhda1cl8uoljdgsedg0am20vcisqxa2nvc7rrpbf6u96qrh633nhvbkvu4bpv7ly1wy2u3v4m3chyorcl4yi7qykgwcgliy1rctjq9ppypsdzqvk+pep1scvwp6knwb+f8vth8reow/j2/mittvef3i6m8n8rbuax/5qfkurbc/gf6jraowohclt28t/tkkbiu6jlbb2ukxfalsfjua2w7xejsxfysyxauxr0e+cxyz7714d+ukj/z+290cwykpajmnxtld03rcoyjky8t9ztpkgk+ugketdrae8cldqnentzthl4h9h0/ez8ztmnt56b3wdofv1o/mbrw4epqubo4rdfjaecoqmnoorju4ryrta+nfmtobyu4id1yfefiwqkqc6ihmi55v0tmtxflerwncg6a4aiorrwe1my7f0pnjttrdmspvhr84fvqcgmvmkvpwaug/h7uio3zj/rl+goazo95apkmhprmcvmwfravj92me8pbimqouwp1t8a3nqkyqzdfibxrmkmngoz9cpgcadtnodaks28jj4v1gk6d7bxnohqibjanqao0jzuyaz0xgkcmqaaxsyencagejh+0rvzi580pvy+nm7kghzviqyqu7vapift0uwnv9wvyz1luqbuak95ddwu9wxbscp+vrkgucvvmdoae+wytmdhhrgtc7n4g66pkhfifw5ljojvjflycfn+w2e6nzlvqnr9rnnldbx3az69y0sihgzeejogbwuxu2qfplrxfhwxd8m0n8+4ja64jogeyecq3vbgvp/nzox8a0lbohzmcrtxzisyl3e8us5z+fmpscfm147pu46kc8dey+z5tpto57lsvjgu738wa9pvzfa5ommz2quvaiy3evhjjq92tlqnmcrvi9auqqqtr3q6xmvkq5pcwe5jshevzkpk8stoi3dtv9d+qh9fs/gunyx3k4+rt6ff+loypmryxys3tjb4phvz4s0mw5gbtnm1xmbvevbic9hfpweihfyiljzqbh3w18dlz7ogz10sesqtqckukxiddrga78v1gt4wtymjhaj/ywtfjv6qds/+4yarughckkuldun85m7dstyl6rp6v8ls78zuudk2mlv5rwkhm4w/yxxefsfj2rjx/ymjhmzhy+k1evqrf5f1/ualaj/k+jvmpfizqh2o+vayglwlg522p7nvlavw7bvy1gwsgfjmcpxfx3z4qa0fjf3ox9p5mpgcynf6qlnmz7p+kjrox2c61z/yx7v/af8aejxjygrgyabi9uzb9fh8nl8zufkyqodaw0ucmpr/7//twriy3yfcdgymkcgasnmmjwaaahicy2bkygbu+n/aempi8v83awmlawnqbauiawb8mgs6ejxjywbgyh7jwmdcqaj2awjgdph/vwfvqwn0aaaaaaaadgdeavab4gj8avidtgqgbeaeyaxobhogrgckb0qh3ghecpp4ngngzgbgegbyw8dfaajmqmwfzv8h8xkahy0b8aaaahiczy9ntsmweivf+gekeqqoyifkbwibkp0rq25yvgr3xxtfpk6bkokjx63ua3aejsajoalcgdvwscebnpbh37x5y08a3oahho7flferpvwyo3inf7gxrln/eg6qx4sbaonvuex9tdjhm6bcbxrheypxugl2hhdhdx18cndwju/hovuv4qb5w7ijo/wkt9dx6si+5l5xui1hl/bhvi+cxqnlqcwhysktob+cmv7vkowt0uqca1vejlodof9ju51pw91t7ndd5yivwzoqcas6syzkrdnq0aub5/jrrxejhoqm5vhj/rbgao5xbyuldowxqhhkimro6dtvzvsvsupcxntwpc3ndfsu1p9zhqec9m9cu7qy0nk6t4e9xxtsdxqrbsueldsrxs1jerjcxta2velqatzlv44relzrit8oz0j/aalabsgaaab4ng2m2w6cmbafe2shihfxb+u6awjhsbsx+vdcfhvetjljgbdxpxr3nxybfccuqobry4sgo+xxwbennhhbfs1udm9/d/w0netzutyprmocppkjhfsmuas5mhsaplvedpfvq6ky+czpnfc6zspu0zqh3ou8xduljzqeeh3fs8yobmqhmxnfhbqomaaaaa==') format('woff'), url('../fonts/iconfont.ttf?t=1522237704791') format('truetype'),
    /* chrome, firefox, opera, safari, android, ios 4.2+*/
    url('../fonts/iconfont.svg?t=1522237704791#iconfont') format('svg');
    /* ios 4.1- */
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-backtop:before {
    content: "\e689";
}
.icon-personal:before {
    content: "\e610";
}
.icon-scan:before {
    content: "\e609";
}
.icon-clear:before {
    content: "\e622";
}
.icon-msg:before {
    content: "\e7a8";
}
.icon-category:before {
    content: "\e7f9";
}
.icon-search:before {
    content: "\e616";
}
.icon-delete:before {
    content: "\e6ac";
}
.icon-service:before {
    content: "\e643";
}
.icon-setting:before {
    content: "\e64c";
}
.icon-back:before {
    content: "\e60f";
}
.icon-shop:before {
    content: "\e624";
}
.icon-close:before {
    content: "\e60c";
}
.icon-more:before {
    content: "\e85c";
}
.icon-home:before {
    content: "\e699";
}
.icon-collect:before {
    content: "\e78c";
}
.icon-cart:before {
    content: "\e635";
}

 


index.css

/*布局*/
    html,body{
        width:100%;
        height:100%;
    }
    /*header*/
    .header-container{
        top:0;
        background:rgba(222,24,27,.9);
    }
    .header-container,
    .tabbar-container{
        position: fixed;
        left:0;
        width:100%;
        height:2.5rem;    
        z-index:1000;
    }
    /*tabbar*/
    .tabbar-container{
        background:#fff;
        bottom:0;
        box-shadow: 0 0 10px 0 rgba(154,141,141,.6);
    }
    /*main-container*/
    .main-container{
        padding:2.5rem 0;
        background:#eee;
    }
    /*nav-container*/
    .nav-container{
        background:#fff;
        margin-bottom:0.5rem;
    }

/*组件*/
    /*navbar*/
    .navbar{
        display:flex;
        height:100%;
    }
    .navbar-left,
    .navbar-center,
    .navbar-right{
        display: flex;
        justify-content:center;
        align-items:center;
    }
    .navbar-left,
    .navbar-right{
        width:2.2rem;
    }
    .navbar-center{
        flex:1;/*占据所有剩余空间*/
    }
    .navbar-left .iconfont,
    .navbar-right .iconfont{
        color:#fff;
        font-size:1.2rem;
    }
    /*searchbox*/
    .searchbox{
        width:100%;
        display: flex;
        height:1.6rem;
        border-radius:0.8rem;/*高度的50%为圆角*/
        background:#fff;
    }
    .searchbox-prepend,
    .searchbox-input,
    .searchbox-append{
        height:100%;
    }
    .searchbox-prepend,
    .searchbox-append{
        display: flex;
        justify-content: center;
        align-items: center;
        width:1.6rem;
    }
    .searchbox-input{
        flex:1;
    }
    .searchbox .iconfont{
        font-size:0.9rem;
        color:#ccc;
        font-weight:bold;
    }
    /*nav*/
    .nav{
        display: flex;
        flex-wrap:wrap;
        padding:0.8rem 0 0.4rem;
    }
    .nav-item{
        width:20%;
        margin-bottom: 0.4rem;
    }
    .nav-link{
        display: block;
        text-align: center;
    }
    .nav-img{
        width:2.25rem;
        height:2.25rem;
        margin-bottom:0.2rem;
    }
    .nav-text{
        display: block;
    }
    /*tabbar*/
    .tabbar,
    .tabbar-item,
    .tabbar-link{
        height:100%;
    }
    .tabbar{
        display: flex;
    }
    .tabbar-item{
        width:25%;
    }
    .tabbar-link{
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
    }
    .tabbar-link .iconfont{
        font-size:1.2rem;
    }
    .tabbar-item-active .tabbar-link{
        color:#de181b;
    }

/*内容*/
    /*recommend*/
    .recommend{
        display: flex;
        flex-wrap:wrap;
        justify-content: space-between;
    }
    .recommend-item{
        width:49.3333%;
        background:#fff;
        box-shadow: 0 1px 1px 0 rgba(0,0,0,.2); 
        margin-bottom:0.25rem;
    }
    .recommend-link{
        display: block;
        width:100%;
        height:100%;
    }
    .recommend-pic{
        width:100%;
        margin-bottom: 0.4rem;
    }
    .recommend-img{
        width:100%;
        height:9.25rem;
    }
    .recommend-name,
    .recommend-origprice,
    .recommend-info{
        padding:0 0.25rem;
        margin-bottom:0.4rem;
    }
    .recommend-name{
        /*文字溢出隐藏,只对块元素有效,不是块元素需要转成块元素先*/
        overflow:hidden;
        white-space: nowrap;/*不换行*/
        text-overflow: ellipsis;
    }
    .recommend-origprice{
        color:#ccc;
    }
    .recommend-info{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .recommend-price{
        color:#e61414;
        font-size:20px;
    }
    [data-dpr="2"] .recommend-price{
        font-size:40px;
    }
    [data-dpr="3"] .recommend-price{
        font-size:60px;
    }
    .recommend-count{
        color:#999;
    }

flexible.js

(function(){
    "use strict";

    // 获取到dpr,然后计算缩放比 scale=1/dpr
    var docel=document.documentelement,
        viewportel=document.queryselector("meta[name=viewport]"),
        dpr=window.devicepixelratio || 1,        
        maxwidth=540,
        minwidth=320;

    dpr=dpr>=3?3:(dpr>=2?2:1);//dpr为1或者2或者3

    docel.setattribute("data-dpr",dpr);
    docel.setattribute("max-width",maxwidth);
    docel.setattribute("min-width",minwidth);

    var scale=1/dpr,
        content='width=device-width,initial-scale='+scale+',user-scalable=no,maximum-scale='+scale+',minimum-scale='+scale+'';

    //替换或插入meta
    if(viewportel){
        viewportel.setattribute("content",content);
    }else{
        viewportel=document.createelement("meta");
        viewportel.setattribute("name","viewport");
        viewportel.setattribute("content",content);
        document.head.appendchild(viewportel);
    }

    setremunit();
    window.onresize=setremunit;

    function setremunit(){
        // 1rem=viewwidth/18.75
        var ratio=18.75;

        var viewwidth=docel.getboundingclientrect().width || window.innerwidth;

        if(maxwidth&&(viewwidth/dpr>maxwidth)){
            viewwidth=maxwidth*dpr;
        }else if(minwidth&&(viewwidth/dpr<minwidth)){
            viewwidth=minwidth*dpr;
        }

        docel.style.fontsize=viewwidth/ratio+"px";            
    }    
})();

效果图

移动端屏幕适配

 

 移动端屏幕适配