手机端用rem+scss做适配的详解详解利用css3的var()实现运行时改变scss的变量值uni-app中使用scss的示例代码scss使用mixin不生效(浏览器无法编译出来)的解决方法前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范CSS3 真的会替代 SCSS 吗

 html{ font-size: 10px; } p{ width: 2rem; /* 2*10 = 20px;*/ margin: 1rem; }

 // 默认16是html默认字号 // 默认750是设计稿默认宽度 // $n是量取设计稿的距离 @charset "UTF-8"; @function rem($n) { @return $n / (750 / 16)+rem; } 

 @function getTop($n) { @return ($n - 1206 / 2) / (750 / 16)+rem; } @function getLeft($n) { @return ($n - 750 / 2) / (750 / 16)+rem; } @function getRight($n) { @return (($n - 750) / 2) / (750 / 16)+rem; } @mixin center($left, $top) { //左右居中 上变 position: absolute; left: 50%; top: rem($top); margin: 0 0 0 getLeft($left); } @mixin centerlt($left, $top) { //上下，左右居中 position: absolute; left: 50%; top: 50%; margin: getTop($top) 0 0 getLeft($left); } @mixin centerrt($right, $top) { //上下，左右居中 position: absolute; right: 50%; top: 50%; margin: getTop($top) getRight($right) 0 0; } @mixin middlert($right, $top) { //上下居中 右变 position: absolute; right: rem($right); top: 50%; margin: getTop($top) 0 0 0; } @mixin centerb($left, $bottom) { //左右居中 下变 position: absolute; left: 50%; bottom: rem($bottom); margin: 0 0 0 getLeft($left); } @mixin leftTop($left, $top) { //左变 上变 position: absolute; left: rem($left); top: rem($top); } @mixin rightTop($right, $top) { //右变 上变 position: absolute; right: rem($right); top: rem($top); } @mixin leftBottom($left, $bottom) { //右变 上变 position: absolute; left: rem($left); bottom: rem($bottom); } 

 .page1-img1{ width: rem(473); height: rem(173); @include centerlt(139, 767); }