移动端屏幕适配
程序员文章站
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";
}
})();
效果图