app.css

$setMediaWidth: 750; @import '../base.scss'; @import '../place.scss';.icon-comment {width: rc(60); //舉例使用rc(傳入值)height: rc(60);font-size: rc(28);color: #51576f;display: flex;align-items: center;justify-content: center; }

base.scss

---

//==================================================== // // reset // //====================================================$reset: false !default; // 是否重置默認樣式 @if $reset {body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, header, hgroup, nav, section, article, aside, footer, figure, figcaption, menu, button { margin: 0; padding: 0 }body { font-family:"microsoft yahei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif; line-height: 1.5; font-size: 16px; color: #000; background-color: #fff; -webkit-user-select: none; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400 }table { border-collapse: collapse; border-spacing: 0 }caption, th { text-align: left }fieldset, img { border: 0 }li { list-style: none }ins { text-decoration: none }del { text-decoration: line-through }input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0 }button { -webkit-appearance: none; border: 0; background: 0 0 }a { -webkit-touch-callout: none; text-decoration: none }em, i { font-style: normal }:focus { outline: 0; -webkit-tap-highlight-color: transparent }*,*:after,*:before{ -webkit-box-sizing: border-box; box-sizing: border-box; } }//==================================================== // // px2rem // //====================================================@import 'rem-calc';//==================================================== // // set html font-size // //====================================================$set-html-font-size: true !default; // 是否開啟設置html字體 $rem-base: 16 !default; // 設置rem單位計算基數 $setMediaWidth: 750 !default; // 設置適配寬度 $mediaArrays:(320 360 375 400 414 480 540 640 720 800 960 1125) !default; @if $set-html-font-size {$htmlSize: null;@if length($mediaArrays)==1 and type-of($mediaArrays) !=string {$htmlSize: $rem-base / ($setMediaWidth / nth($mediaArrays, 1));@media screen and (min-width: #{nth($mediaArrays, 1)}) {html {font-size: #{$htmlSize};}}}@if length($mediaArrays)>1 {@for $i from 1 through length($mediaArrays) {$htmlSize: $rem-base / ($setMediaWidth / nth($mediaArrays, $i));$media: null;@if $i==1 {$media: "screen and (max-width: #{nth($mediaArrays, $i + 1) - 1}px)";}@else if $i==length($mediaArrays) {$media: "screen and (min-width: #{nth($mediaArrays, $i)}px)";}@else {$media: "screen and (min-width: #{nth($mediaArrays, $i)}px) and (max-width: #{nth($mediaArrays, $i + 1) - 1}px)";}@media #{$media} {html {font-size: #{$htmlSize};}}}} }//==================================================== // // mixins // //====================================================$version: '?v=' + random() * 100000000000000000 !default; $img_url: '/public/dist/images' !default;@mixin image($url){background-image:url( unquote($img_url + '/'+ $url ) ); }@mixin placeholder($color){::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: $color;}::-moz-placeholder { /* Firefox 19+ */color: $color;}:-ms-input-placeholder { /* IE 10+ */color: $color;}:-moz-placeholder { /* Firefox 18- */color: $color;} }$pre:ms moz webkit !default; @mixin prefixs($map, $vendors: $pre) {@each $prop, $value in $map {@if $vendors {@each $vendor in $vendors {#{"-" + $vendor + "-" + $prop}: #{$value};}}#{$prop}: #{$value};} }@mixin size($width, $height: $width, $lineHeight: 0px) {width: $width;height: $height;@if $lineHeight != 0px{line-height: $lineHeight;} }//use: @include position(absolute,top 5 right 6); @mixin position($position,$args) {$offsets: top right bottom left z-index;position: $position;@each $o in $offsets {$i: index($args, $o);@if $i and $i + 1 <= length($args) and type-of( nth($args, $i + 1) ) == number {#{$o}:nth($args, $i + 1);}} } @mixin absolute($args) {@include position(absolute, $args); } @mixin fixed($args) {@include position(fixed, $args); } @mixin relative($args) {@include position(relative, $args); }@mixin opacity($color, $trans) {background: $color;filter: alpha(opacity=$trans * 100);opacity: $trans; }@mixin filter($color, $trans) {$rgba: rgba($color, $trans);background: $rgba;filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#{ie-hex-str($rgba)}", EndColorStr="#{ie-hex-str($rgba)}");:root & {filter: none;} } //引用placeholder selector @import 'place.scss';

---

place.scss

/* 作為繼承的模板使用 */ %fl {float: left; }%fr {float: right; }%fn {float: none; }%cf {*zoom: 1;&:after {content: '';display: table;clear: both;} }%dn {display: none; }%db {display: block; }%dib {display: inline-block;*zoom: 1;*display: inline; }%tl {text-align: left; }%tr {text-align: right; }%tc {text-align: center; }%ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;max-width: 100%; }%border-box {-moz-box-sizing: border-box;-webkt-box-sizing: border-box;box-sizing: border-box; }%arrow {width: 0;height: 0;line-height: 0;font-size: 0;overflow: hidden;display: inline-block; }%relative {position: relative; }%absolute {position: absolute; }%ovh {overflow: hidden; }%flexbox {display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6display: -moz-box; // OLD - Firefox 19- (buggy but mostly works)display: -ms-flexbox; // TWEENER - IE 10display: -webkit-flex; // NEW - Chromedisplay: flex; }%select{-ms-user-select: text;-moz-user-select: text;-webkit-user-select: text;user-select: text; }

---

rem-calc.scss

// Foundation by ZURB // foundation.zurb.com // Licensed under MIT Open Source// This is the default html and body font-size for the base rem value. $rem-base: 16px !default; $rem-digits:2 !default;// IMPORT ONCE // We use this to prevent styles from being loaded multiple times for compenents that rely on other components. $modules: () !default; @mixin exports($name) {@if (index($modules, $name) == false) {$modules: append($modules, $name);@content;} }// // @functions //@function pow($x, $n) {$ret: 1;@if $n >= 0 {@for $i from 1 through $n {$ret: $ret * $x;} } @else {@for $i from $n to 0 {$ret: $ret / $x;}}@return $ret; }@function to-fixed($float, $digits: 2) { $sass-precision: 5;@if $digits > $sass-precision {@warn "Sass sets default precision to #{$sass-precision} digits, and there is no way to change that for now."+ "The returned number will have #{$sass-precision} digits, even if you asked for `#{$digits}`."+ "See https://github.com/sass/sass/issues/1122 for further informations.";}$pow: pow(10, $digits);@return round($float * $pow) / $pow; }@function toFixed($args...){@return to-fixed($args...); }// RANGES // We use these functions to define ranges for various things, like media queries. @function lower-bound($range){@if length($range) <= 0 {@return 0;}@return nth($range,1); }@function upper-bound($range) {@if length($range) < 2 {@return 999999999999;}@return nth($range, 2); }// STRIP UNIT // It strips the unit of measure and returns it @function strip-unit($num) {@return $num / ($num * 0 + 1); }// CONVERT TO REM @function convert-to-rem($value, $base-digits: $rem-digits) {$value: strip-unit($value) / strip-unit($rem-base) * 1rem;@if ($value == 0rem) { $value: 0; } // Turn 0rem into 0@return toFixed($value,$base-digits); }@function data($attr) {@if $namespace {@return '[data-' + $namespace + '-' + $attr + ']';}@return '[data-' + $attr + ']'; }// REM CALC // New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's. // Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported: // // rem-calc(10 20 30px 40); // // Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets // // rem-calc((10, 20, 30, 40px)); // // Optionally call with a different base (eg: 8px) to calculate rem. // // rem-calc(16px 32px 48px, 8px); // // If you require to comma separate your list // // rem-calc((16px, 32px, 48), 8px);@function rem-calc($values, $base-digits: $rem-digits) {$max: length($values);@if $max == 1 { @return convert-to-rem(nth($values, 1), $base-digits); }$remValues: ();@for $i from 1 through $max {$remValues: append($remValues, convert-to-rem(nth($values, $i), $base-digits));}@return $remValues; }// OLD EM CALC // Deprecated: We'll drop support for this in 5.1.0, use rem-calc() @function emCalc($values){@return rem-calc($values); }// OLD EM CALC // Deprecated: We'll drop support for this in 5.1.0, use rem-calc() @function em-calc($values){@return rem-calc($values); }// eg.... @function rc($values...){@return rem-calc($values...); }

總結

以上是生活随笔為你收集整理的使用rem的简单处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。