使用rem的简单处理

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的简单处理相关推荐

rem+vw简单适配
rem+vw简单适配什么是vw和vh? vw : 1vw 等于视口宽度的1% vh : 1vh 等于视口高度的1% vmin : 选取 vw 和 vh 中最小的那个 v ...
html em vw,CSS3 的视口单位vw、vh实现自适应（带有px，em，rem的简单介绍）
一.px,em,rem,vw的简单介绍 1.px px其实就是像素的意思,全称pixel,也就是图像的基本采样单位.对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机.而我们通常所说的显示器 ...
前端学习（381）：CSS3 的视口单位vw、vh实现自适应（带有px，em，rem的简单介绍）
一.px,em,rem,vw的简单介绍 1.px px其实就是像素的意思,全称pixel,也就是图像的基本采样单位.对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机.而我们通常所说的显示器 ...
CSS3 的视口单位vw、vh实现自适应（带有px，em，rem的简单介绍）
一.px,em,rem,vw的简单介绍 1.px px其实就是像素的意思,全称pixel,也就是图像的基本采样单位.对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机.而我们通常所说的显示器 ...
js px转rem，简单版，注意不能修改ui框架的px
需要你手动修改一下设计的分辨率尺寸,setRem函数会自动根据当前屏幕大小和设计分辨率大小的比例进行rem转换. 代码: const baseSize = 50 // 设置 rem 函数 functi ...
简单粗暴的移动端页面开发技能
移动端响应式页面开发说简单也简单,根据屏幕尺寸调节根字体大小. 大宽度用%,高度和小宽度全部使用rem,简单粗暴. 之前阅读过大漠老师的使用Flexible实现手淘H5页面的终端适配,介绍了手淘项目的 ...
Rem布局的原理解析
什么是Rem rem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先来了解下em em作为font-size的单位时,其代表 ...
移动端布局(三) rem布局及原理
什么是rem 首先来了解一下什么是em: 作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小. s1.s2.s5.s6的font-size和line-he ...
[html] 移动端布局的自适应如何做？
[html] 移动端布局的自适应如何做? 移动端的布局,如果是采用框架的话,小程序和uni-app等都有响应式单位rpx来做自适应. 如果单纯的用Vue或React的话,一般来说就是flex配合rem ...

使用rem的简单处理

使用rem的简单处理相关推荐

最新文章

热门文章