scss自适应_使用SCSS完成动态rem适配的自动计算

废话不多说，直接看代码。

目录和文件

├── css

│ ├── style.css (style.scss打包后生成)

│ └── style.css.map

├── index.html

└── scss

└── style.scss

index.html结构

Document

var pageWidth = window.innerWidth

document.write(``)

box

box

box

box

/scss/style.scss源码

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-size: 16px;

}

$designWidth: 1000;

@function px2rem($px) {

@return $px/$designWidth+rem;

}

.child {

background: #ddd;

width: px2rem(400);

height: px2rem(200);

margin: px2rem(50) px2rem(50);

border: 1px solid #000;

float: left;

font-size: 1.2em;

}

.clearfix::after {

content: '';

display: block;

clear: both;

}