├── Procfile ├── README.md ├── psd └── 53083a48e302c.psd ├── public ├── images │ ├── sprite.png │ ├── icon_book.png │ ├── icon_left.png │ ├── icon_more.png │ ├── icon_tag.png │ ├── icon_person.png │ ├── icon_right.png │ └── sprite.sprite ├── css │ ├── size.css │ ├── reset.css.map │ ├── reset.scss │ ├── reset.css │ ├── app.scss │ ├── app.css.map │ ├── app.css │ └── size.scss └── js │ └── lib │ └── resize.js ├── routes └── index.js ├── package.json ├── app.js ├── .gitignore ├── LICENSE └── html └── app.ejs /Procfile: -------------------------------------------------------------------------------- 1 | web: node app.js 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WebApp 2 | 简单的webapp自适应示例 3 | -------------------------------------------------------------------------------- /psd/53083a48e302c.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iwangx/WebApp/HEAD/psd/53083a48e302c.psd -------------------------------------------------------------------------------- /public/images/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iwangx/WebApp/HEAD/public/images/sprite.png -------------------------------------------------------------------------------- /public/images/icon_book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iwangx/WebApp/HEAD/public/images/icon_book.png -------------------------------------------------------------------------------- /public/images/icon_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iwangx/WebApp/HEAD/public/images/icon_left.png -------------------------------------------------------------------------------- /public/images/icon_more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iwangx/WebApp/HEAD/public/images/icon_more.png -------------------------------------------------------------------------------- /public/images/icon_tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iwangx/WebApp/HEAD/public/images/icon_tag.png -------------------------------------------------------------------------------- /public/images/icon_person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iwangx/WebApp/HEAD/public/images/icon_person.png -------------------------------------------------------------------------------- /public/images/icon_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iwangx/WebApp/HEAD/public/images/icon_right.png -------------------------------------------------------------------------------- /public/css/size.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*手机端尺寸自适应尺寸文件，以640宽度，40px作为最小大小,1px=1/40rem*/ 3 | 4 | /*# sourceMappingURL=size.css.map */ 5 | -------------------------------------------------------------------------------- /routes/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(app) { 2 | app.get("/",function(req,res){ 3 | res.render("app"); 4 | }); 5 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "iwangx", 3 | "name": "IM", 4 | "version": "0.0.1", 5 | "main": "app.js", 6 | "description": "", 7 | "devDependencies": {}, 8 | "engines": { 9 | "node": "0.10.13", 10 | "npm": "1.3.2" 11 | }, 12 | "dependencies": { 13 | "express": "*", 14 | "routes": "*", 15 | "ejs": "*" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /public/css/reset.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA;;;;;;;;uDAQuD;EACrD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,cAAc,EAAE,QAAQ;EACxB,UAAU,EAAE,WAAW;;AAEzB,MAAM;EAAC,UAAU,EAAE,WAAW;;AAC9B,CAAC;EAAC,KAAK,EAAE,OAAO;EAAC,eAAe,EAAE,IAAI;;AACtC,MAAK;EAAC,OAAO,EAAE,KAAK", 4 | "sources": ["reset.scss"], 5 | "names": [], 6 | "file": "reset.css" 7 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | var express=require("express"); 2 | var bodyParser = require('body-parser'); 3 | var path=require("path"); 4 | var routes = require('./routes/index'); 5 | var app = express(); 6 | app.set('port', process.env.PORT || 3000); 7 | app.set('views', path.join(__dirname, 'html')); 8 | app.set('view engine', 'ejs'); 9 | app.use(express.static(path.join(__dirname, 'public'))); 10 | app.use(bodyParser.urlencoded({extended: false})); 11 | app.use(bodyParser.json()); 12 | routes(app); 13 | app.listen(app.get('port'), function() { 14 | console.log('Express server listening on port ' + app.get('port')); 15 | }); -------------------------------------------------------------------------------- /public/css/reset.scss: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, font, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td ,button{ 10 | margin: 0; 11 | padding: 0; 12 | border: 0; 13 | outline: 0; 14 | vertical-align: baseline; 15 | background: transparent; 16 | } 17 | button{background: transparent;} 18 | a{color: #3d3d3d;text-decoration: none;} 19 | ul,li{display: block} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | /.idea 29 | -------------------------------------------------------------------------------- /public/css/reset.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, font, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, button { 10 | margin: 0; 11 | padding: 0; 12 | border: 0; 13 | outline: 0; 14 | vertical-align: baseline; 15 | background: transparent; } 16 | 17 | button { 18 | background: transparent; } 19 | 20 | a { 21 | color: #3d3d3d; 22 | text-decoration: none; } 23 | 24 | ul, li { 25 | display: block; } 26 | 27 | /*# sourceMappingURL=reset.css.map */ 28 | -------------------------------------------------------------------------------- /public/images/sprite.sprite: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 iwangx 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /public/js/lib/resize.js: -------------------------------------------------------------------------------- 1 | !function(win) { 2 | function resize() { 3 | var domWidth = domEle.getBoundingClientRect().width; 4 | if(domWidth / v > 540){ 5 | domWidth = 540 * v; 6 | } 7 | win.rem = domWidth / 16; 8 | domEle.style.fontSize = win.rem + "px"; 9 | } 10 | var v, initial_scale, timeCode, dom = win.document, domEle = dom.documentElement, viewport = dom.querySelector('meta[name="viewport"]'), flexible = dom.querySelector('meta[name="flexible"]'); 11 | if (viewport) { 12 | var o = viewport.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/); 13 | if(o){ 14 | initial_scale = parseFloat(o[2]); 15 | v = parseInt(1 / initial_scale); 16 | } 17 | } else if(flexible) { 18 | var o = flexible.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/); 19 | if (o) { 20 | v = parseFloat(o[2]); 21 | initial_scale = parseFloat((1 / v).toFixed(2)) 22 | } 23 | } 24 | if (!v && !initial_scale) { 25 | var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)); 26 | v = win.devicePixelRatio; 27 | v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v 28 | } 29 | //没有viewport标签的情况下 30 | if (domEle.setAttribute("data-dpr", v), !viewport) { 31 | if (viewport = dom.createElement("meta"), viewport.setAttribute("name", "viewport"), viewport.setAttribute("content", "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no"), domEle.firstElementChild) { 32 | domEle.firstElementChild.appendChild(viewport) 33 | } else { 34 | var m = dom.createElement("div"); 35 | m.appendChild(viewport), dom.write(m.innerHTML) 36 | } 37 | } 38 | win.dpr = v; 39 | win.addEventListener("resize", function() { 40 | clearTimeout(timeCode), timeCode = setTimeout(resize, 300) 41 | }, false); 42 | win.addEventListener("pageshow", function(b) { 43 | b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300)) 44 | }, false); 45 | resize(); 46 | }(window); -------------------------------------------------------------------------------- /public/css/app.scss: -------------------------------------------------------------------------------- 1 | @import "size"; 2 | //所有图片变量 3 | @mixin sprite{background:url(../images/sprite.png) no-repeat ;background-size:$_138 $_163;} 4 | @mixin icon_right{height:$_59;width:$_59;background-position:0 -$_75 0 -$_5;} 5 | @mixin icon_left{height:$_59;width:$_59;background-position:0 0;} 6 | @mixin icon_tag{height:$_44;width:$_65;background-position:0 -$_1 0 -$_119;} 7 | @mixin icon_person{height:$_44;width:$_65;background-position:0 0 -$_66;} 8 | @mixin icon_book{height:$_44;width:$_65;background-position:0 -$_73 0 -$_71;} 9 | @mixin icon_more{height:$_44;width:$_65;background-position:0 -$_73 0 -$_119;} 10 | 11 | body{background: #fbfbfb} 12 | .sprite{@include sprite;} 13 | .header{position: fixed;background: #dd3131;height: $_90;line-height: $_90;;width: 100%;left: 0;top: 0;font-size: $_40;color: #fff;text-align: center; 14 | button{position: absolute;top: $_16;border: $_2 solid #fff;border-radius: 50%;box-sizing: content-box} 15 | } 16 | .btn-left{@include icon_left;left: $_16;} 17 | .btn-right{@include icon_right;right: $_16;} 18 | .nav{display: -webkit-box;position: fixed;left: 0;top: $_90;color: #3d3d3d;font-size: $_30;width: 100%;border-bottom: $_1 solid #e7e5e6; 19 | a{display: block;height: $_60;line-height: $_60;text-align: center;background: #fff;-webkit-box-flex: 1;border-right: $_1 solid #e7e5e6;box-sizing: border-box;} 20 | } 21 | .controller{padding: $_151 0 $_100 0;} 22 | .list{ 23 | li{border-bottom:$_1 solid #cfcfcf } 24 | a{display: -webkit-box;padding: $_16;} 25 | img{height: $_122;width: $_122;display: block} 26 | } 27 | .list-right{-webkit-box-flex: 1;padding-left: $_15; 28 | h1{color: #555;font-size: $_24;} 29 | p{color: #878787;font-size: $_18;margin-top: $_15;line-height: 1.5} 30 | } 31 | .footer{height: $_100;position: fixed;left: 0;bottom: 0;width: 100%;display: -webkit-box;background: #4a4a4a;text-align: center; 32 | a{display: block;-webkit-box-flex: 1;box-sizing: border-box;padding-top: $_10;border-right: $_1 solid #fff; 33 | &:last-child{border-right: none} 34 | } 35 | i{display: block;margin: 0 auto} 36 | span{color: #fff;font-size: $_24;display: block;margin-top: $_5;} 37 | } 38 | .icon_book{@include icon_book} 39 | .icon_tag{@include icon_tag} 40 | .icon_person{@include icon_person} 41 | .icon_more{@include icon_more} -------------------------------------------------------------------------------- /public/css/app.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["app.scss","size.scss"], 5 | "names": [], 6 | "file": "app.css" 7 | } -------------------------------------------------------------------------------- /html/app.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | app自适应 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 远程酒业 18 | 19 |
20 | 26 |
27 | 65 |
66 | 84 | 85 | -------------------------------------------------------------------------------- /public/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*手机端尺寸自适应尺寸文件，以640宽度，40px作为最小大小,1px=1/40rem*/ 3 | body { 4 | background: #fbfbfb; } 5 | 6 | .sprite { 7 | background: url(../images/sprite.png) no-repeat; 8 | background-size: 3.45rem 4.075rem; } 9 | 10 | .header { 11 | position: fixed; 12 | background: #dd3131; 13 | height: 2.25rem; 14 | line-height: 2.25rem; 15 | width: 100%; 16 | left: 0; 17 | top: 0; 18 | font-size: 1rem; 19 | color: #fff; 20 | text-align: center; } 21 | .header button { 22 | position: absolute; 23 | top: 0.4rem; 24 | border: 0.05rem solid #fff; 25 | border-radius: 50%; 26 | box-sizing: content-box; } 27 | 28 | .btn-left { 29 | height: 1.475rem; 30 | width: 1.475rem; 31 | background-position: 0 0; 32 | left: 0.4rem; } 33 | 34 | .btn-right { 35 | height: 1.475rem; 36 | width: 1.475rem; 37 | background-position: -1.875rem -0.125rem; 38 | right: 0.4rem; } 39 | 40 | .nav { 41 | display: -webkit-box; 42 | position: fixed; 43 | left: 0; 44 | top: 2.25rem; 45 | color: #3d3d3d; 46 | font-size: 0.75rem; 47 | width: 100%; 48 | border-bottom: 0.025rem solid #e7e5e6; } 49 | .nav a { 50 | display: block; 51 | height: 1.5rem; 52 | line-height: 1.5rem; 53 | text-align: center; 54 | background: #fff; 55 | -webkit-box-flex: 1; 56 | border-right: 0.025rem solid #e7e5e6; 57 | box-sizing: border-box; } 58 | 59 | .controller { 60 | padding: 3.775rem 0 2.5rem 0; } 61 | 62 | .list li { 63 | border-bottom: 0.025rem solid #cfcfcf; } 64 | .list a { 65 | display: -webkit-box; 66 | padding: 0.4rem; } 67 | .list img { 68 | height: 3.05rem; 69 | width: 3.05rem; 70 | display: block; } 71 | 72 | .list-right { 73 | -webkit-box-flex: 1; 74 | padding-left: 0.375rem; } 75 | .list-right h1 { 76 | color: #555; 77 | font-size: 0.6rem; } 78 | .list-right p { 79 | color: #878787; 80 | font-size: 0.45rem; 81 | margin-top: 0.375rem; 82 | line-height: 1.5; } 83 | 84 | .footer { 85 | height: 2.5rem; 86 | position: fixed; 87 | left: 0; 88 | bottom: 0; 89 | width: 100%; 90 | display: -webkit-box; 91 | background: #4a4a4a; 92 | text-align: center; } 93 | .footer a { 94 | display: block; 95 | -webkit-box-flex: 1; 96 | box-sizing: border-box; 97 | padding-top: 0.25rem; 98 | border-right: 0.025rem solid #fff; } 99 | .footer a:last-child { 100 | border-right: none; } 101 | .footer i { 102 | display: block; 103 | margin: 0 auto; } 104 | .footer span { 105 | color: #fff; 106 | font-size: 0.6rem; 107 | display: block; 108 | margin-top: 0.125rem; } 109 | 110 | .icon_book { 111 | height: 1.1rem; 112 | width: 1.625rem; 113 | background-position: -1.825rem -1.775rem; } 114 | 115 | .icon_tag { 116 | height: 1.1rem; 117 | width: 1.625rem; 118 | background-position: -0.025rem -2.975rem; } 119 | 120 | .icon_person { 121 | height: 1.1rem; 122 | width: 1.625rem; 123 | background-position: 0 -1.65rem; } 124 | 125 | .icon_more { 126 | height: 1.1rem; 127 | width: 1.625rem; 128 | background-position: -1.825rem -2.975rem; } 129 | 130 | /*# sourceMappingURL=app.css.map */ 131 | -------------------------------------------------------------------------------- /public/css/size.scss: -------------------------------------------------------------------------------- 1 | /*手机端尺寸自适应尺寸文件，以640宽度，40px作为最小大小,1px=1/40rem*/ 2 | $_1:.025rem; 3 | $_2:.05rem; 4 | $_3:.075rem; 5 | $_4:.1rem; 6 | $_5:.125rem; 7 | $_6:.15rem; 8 | $_7:.175rem; 9 | $_8:.2rem; 10 | $_9:.225rem; 11 | $_10:.25rem; 12 | $_11:.275rem; 13 | $_12:.3rem; 14 | $_13:.325rem; 15 | $_14:.35rem; 16 | $_15:.375rem; 17 | $_16:.4rem; 18 | $_17:.425rem; 19 | $_18:.45rem; 20 | $_19:.475rem; 21 | $_20:.5rem; 22 | $_21:.525rem; 23 | $_22:.55rem; 24 | $_23:.575rem; 25 | $_24:.6rem; 26 | $_25:.625rem; 27 | $_26:.65rem; 28 | $_27:.675rem; 29 | $_28:.7rem; 30 | $_29:.725rem; 31 | $_30:.75rem; 32 | $_31:.775rem; 33 | $_32:.8rem; 34 | $_33:.825rem; 35 | $_34:.85rem; 36 | $_35:.875rem; 37 | $_36:.9rem; 38 | $_37:.925rem; 39 | $_38:.95rem; 40 | $_39:.975rem; 41 | $_40:1rem; 42 | $_41:1.025rem; 43 | $_42:1.05rem; 44 | $_43:1.075rem; 45 | $_44:1.1rem; 46 | $_45:1.125rem; 47 | $_46:1.15rem; 48 | $_47:1.175rem; 49 | $_48:1.2rem; 50 | $_49:1.225rem; 51 | $_50:1.25rem; 52 | $_51:1.275rem; 53 | $_52:1.3rem; 54 | $_53:1.325rem; 55 | $_54:1.35rem; 56 | $_55:1.375rem; 57 | $_56:1.4rem; 58 | $_57:1.425rem; 59 | $_58:1.45rem; 60 | $_59:1.475rem; 61 | $_60:1.5rem; 62 | $_61:1.525rem; 63 | $_62:1.55rem; 64 | $_63:1.575rem; 65 | $_64:1.6rem; 66 | $_65:1.625rem; 67 | $_66:1.65rem; 68 | $_67:1.675rem; 69 | $_68:1.7rem; 70 | $_69:1.725rem; 71 | $_70:1.75rem; 72 | $_71:1.775rem; 73 | $_72:1.8rem; 74 | $_73:1.825rem; 75 | $_74:1.85rem; 76 | $_75:1.875rem; 77 | $_76:1.9rem; 78 | $_77:1.925rem; 79 | $_78:1.95rem; 80 | $_79:1.975rem; 81 | $_80:2rem; 82 | $_81:2.025rem; 83 | $_82:2.05rem; 84 | $_83:2.075rem; 85 | $_84:2.1rem; 86 | $_85:2.125rem; 87 | $_86:2.15rem; 88 | $_87:2.175rem; 89 | $_88:2.2rem; 90 | $_89:2.225rem; 91 | $_90:2.25rem; 92 | $_91:2.275rem; 93 | $_92:2.3rem; 94 | $_93:2.325rem; 95 | $_94:2.35rem; 96 | $_95:2.375rem; 97 | $_96:2.4rem; 98 | $_97:2.425rem; 99 | $_98:2.45rem; 100 | $_99:2.475rem; 101 | $_100:2.5rem; 102 | $_101:2.525rem; 103 | $_102:2.55rem; 104 | $_103:2.575rem; 105 | $_104:2.6rem; 106 | $_105:2.625rem; 107 | $_106:2.65rem; 108 | $_107:2.675rem; 109 | $_108:2.7rem; 110 | $_109:2.725rem; 111 | $_110:2.75rem; 112 | $_111:2.775rem; 113 | $_112:2.8rem; 114 | $_113:2.825rem; 115 | $_114:2.85rem; 116 | $_115:2.875rem; 117 | $_116:2.9rem; 118 | $_117:2.925rem; 119 | $_118:2.95rem; 120 | $_119:2.975rem; 121 | $_120:3rem; 122 | $_121:3.025rem; 123 | $_122:3.05rem; 124 | $_123:3.075rem; 125 | $_124:3.1rem; 126 | $_125:3.125rem; 127 | $_126:3.15rem; 128 | $_127:3.175rem; 129 | $_128:3.2rem; 130 | $_129:3.225rem; 131 | $_130:3.25rem; 132 | $_131:3.275rem; 133 | $_132:3.3rem; 134 | $_133:3.325rem; 135 | $_134:3.35rem; 136 | $_135:3.375rem; 137 | $_136:3.4rem; 138 | $_137:3.425rem; 139 | $_138:3.45rem; 140 | $_139:3.475rem; 141 | $_140:3.5rem; 142 | $_141:3.525rem; 143 | $_142:3.55rem; 144 | $_143:3.575rem; 145 | $_144:3.6rem; 146 | $_145:3.625rem; 147 | $_146:3.65rem; 148 | $_147:3.675rem; 149 | $_148:3.7rem; 150 | $_149:3.725rem; 151 | $_150:3.75rem; 152 | $_151:3.775rem; 153 | $_152:3.8rem; 154 | $_153:3.825rem; 155 | $_154:3.85rem; 156 | $_155:3.875rem; 157 | $_156:3.9rem; 158 | $_157:3.925rem; 159 | $_158:3.95rem; 160 | $_159:3.975rem; 161 | $_160:4rem; 162 | $_161:4.025rem; 163 | $_162:4.05rem; 164 | $_163:4.075rem; 165 | $_164:4.1rem; 166 | $_165:4.125rem; 167 | $_166:4.15rem; 168 | $_167:4.175rem; 169 | $_168:4.2rem; 170 | $_169:4.225rem; 171 | $_170:4.25rem; 172 | $_171:4.275rem; 173 | $_172:4.3rem; 174 | $_173:4.325rem; 175 | $_174:4.35rem; 176 | $_175:4.375rem; 177 | $_176:4.4rem; 178 | $_177:4.425rem; 179 | $_178:4.45rem; 180 | $_179:4.475rem; 181 | $_180:4.5rem; 182 | $_181:4.525rem; 183 | $_182:4.55rem; 184 | $_183:4.575rem; 185 | $_184:4.6rem; 186 | $_185:4.625rem; 187 | $_186:4.65rem; 188 | $_187:4.675rem; 189 | $_188:4.7rem; 190 | $_189:4.725rem; 191 | $_190:4.75rem; 192 | $_191:4.775rem; 193 | $_192:4.8rem; 194 | $_193:4.825rem; 195 | $_194:4.85rem; 196 | $_195:4.875rem; 197 | $_196:4.9rem; 198 | $_197:4.925rem; 199 | $_198:4.95rem; 200 | $_199:4.975rem; 201 | $_200:5rem; 202 | $_201:5.025rem; 203 | $_202:5.05rem; 204 | $_203:5.075rem; 205 | $_204:5.1rem; 206 | $_205:5.125rem; 207 | $_206:5.15rem; 208 | $_207:5.175rem; 209 | $_208:5.2rem; 210 | $_209:5.225rem; 211 | $_210:5.25rem; 212 | $_211:5.275rem; 213 | $_212:5.3rem; 214 | $_213:5.325rem; 215 | $_214:5.35rem; 216 | $_215:5.375rem; 217 | $_216:5.4rem; 218 | $_217:5.425rem; 219 | $_218:5.45rem; 220 | $_219:5.475rem; 221 | $_220:5.5rem; 222 | $_221:5.525rem; 223 | $_222:5.55rem; 224 | $_223:5.575rem; 225 | $_224:5.6rem; 226 | $_225:5.625rem; 227 | $_226:5.65rem; 228 | $_227:5.675rem; 229 | $_228:5.7rem; 230 | $_229:5.725rem; 231 | $_230:5.75rem; 232 | $_231:5.775rem; 233 | $_232:5.8rem; 234 | $_233:5.825rem; 235 | $_234:5.85rem; 236 | $_235:5.875rem; 237 | $_236:5.9rem; 238 | $_237:5.925rem; 239 | $_238:5.95rem; 240 | $_239:5.975rem; 241 | $_240:6rem; 242 | $_241:6.025rem; 243 | $_242:6.05rem; 244 | $_243:6.075rem; 245 | $_244:6.1rem; 246 | $_245:6.125rem; 247 | $_246:6.15rem; 248 | $_247:6.175rem; 249 | $_248:6.2rem; 250 | $_249:6.225rem; 251 | $_250:6.25rem; 252 | $_251:6.275rem; 253 | $_252:6.3rem; 254 | $_253:6.325rem; 255 | $_254:6.35rem; 256 | $_255:6.375rem; 257 | $_256:6.4rem; 258 | $_257:6.425rem; 259 | $_258:6.45rem; 260 | $_259:6.475rem; 261 | $_260:6.5rem; 262 | $_261:6.525rem; 263 | $_262:6.55rem; 264 | $_263:6.575rem; 265 | $_264:6.6rem; 266 | $_265:6.625rem; 267 | $_266:6.65rem; 268 | $_267:6.675rem; 269 | $_268:6.7rem; 270 | $_269:6.725rem; 271 | $_270:6.75rem; 272 | $_271:6.775rem; 273 | $_272:6.8rem; 274 | $_273:6.825rem; 275 | $_274:6.85rem; 276 | $_275:6.875rem; 277 | $_276:6.9rem; 278 | $_277:6.925rem; 279 | $_278:6.95rem; 280 | $_279:6.975rem; 281 | $_280:7rem; 282 | $_281:7.025rem; 283 | $_282:7.05rem; 284 | $_283:7.075rem; 285 | $_284:7.1rem; 286 | $_285:7.125rem; 287 | $_286:7.15rem; 288 | $_287:7.175rem; 289 | $_288:7.2rem; 290 | $_289:7.225rem; 291 | $_290:7.25rem; 292 | $_291:7.275rem; 293 | $_292:7.3rem; 294 | $_293:7.325rem; 295 | $_294:7.35rem; 296 | $_295:7.375rem; 297 | $_296:7.4rem; 298 | $_297:7.425rem; 299 | $_298:7.45rem; 300 | $_299:7.475rem; 301 | $_300:7.5rem; 302 | $_301:7.525rem; 303 | $_302:7.55rem; 304 | $_303:7.575rem; 305 | $_304:7.6rem; 306 | $_305:7.625rem; 307 | $_306:7.65rem; 308 | $_307:7.675rem; 309 | $_308:7.7rem; 310 | $_309:7.725rem; 311 | $_310:7.75rem; 312 | $_311:7.775rem; 313 | $_312:7.8rem; 314 | $_313:7.825rem; 315 | $_314:7.85rem; 316 | $_315:7.875rem; 317 | $_316:7.9rem; 318 | $_317:7.925rem; 319 | $_318:7.95rem; 320 | $_319:7.975rem; 321 | $_320:8rem; 322 | $_321:8.025rem; 323 | $_322:8.05rem; 324 | $_323:8.075rem; 325 | $_324:8.1rem; 326 | $_325:8.125rem; 327 | $_326:8.15rem; 328 | $_327:8.175rem; 329 | $_328:8.2rem; 330 | $_329:8.225rem; 331 | $_330:8.25rem; 332 | $_331:8.275rem; 333 | $_332:8.3rem; 334 | $_333:8.325rem; 335 | $_334:8.35rem; 336 | $_335:8.375rem; 337 | $_336:8.4rem; 338 | $_337:8.425rem; 339 | $_338:8.45rem; 340 | $_339:8.475rem; 341 | $_340:8.5rem; 342 | $_341:8.525rem; 343 | $_342:8.55rem; 344 | $_343:8.575rem; 345 | $_344:8.6rem; 346 | $_345:8.625rem; 347 | $_346:8.65rem; 348 | $_347:8.675rem; 349 | $_348:8.7rem; 350 | $_349:8.725rem; 351 | $_350:8.75rem; 352 | $_351:8.775rem; 353 | $_352:8.8rem; 354 | $_353:8.825rem; 355 | $_354:8.85rem; 356 | $_355:8.875rem; 357 | $_356:8.9rem; 358 | $_357:8.925rem; 359 | $_358:8.95rem; 360 | $_359:8.975rem; 361 | $_360:9rem; 362 | $_361:9.025rem; 363 | $_362:9.05rem; 364 | $_363:9.075rem; 365 | $_364:9.1rem; 366 | $_365:9.125rem; 367 | $_366:9.15rem; 368 | $_367:9.175rem; 369 | $_368:9.2rem; 370 | $_369:9.225rem; 371 | $_370:9.25rem; 372 | $_371:9.275rem; 373 | $_372:9.3rem; 374 | $_373:9.325rem; 375 | $_374:9.35rem; 376 | $_375:9.375rem; 377 | $_376:9.4rem; 378 | $_377:9.425rem; 379 | $_378:9.45rem; 380 | $_379:9.475rem; 381 | $_380:9.5rem; 382 | $_381:9.525rem; 383 | $_382:9.55rem; 384 | $_383:9.575rem; 385 | $_384:9.6rem; 386 | $_385:9.625rem; 387 | $_386:9.65rem; 388 | $_387:9.675rem; 389 | $_388:9.7rem; 390 | $_389:9.725rem; 391 | $_390:9.75rem; 392 | $_391:9.775rem; 393 | $_392:9.8rem; 394 | $_393:9.825rem; 395 | $_394:9.85rem; 396 | $_395:9.875rem; 397 | $_396:9.9rem; 398 | $_397:9.925rem; 399 | $_398:9.95rem; 400 | $_399:9.975rem; 401 | $_400:10rem; --------------------------------------------------------------------------------