5 changed files with 161 additions and 0 deletions
@ -0,0 +1,41 @@ |
|||||
|
$red: #ff0000; |
||||
|
|
||||
|
html, |
||||
|
body { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.border-right { |
||||
|
&::after { |
||||
|
position: absolute; |
||||
|
content: " "; |
||||
|
height: 100%; |
||||
|
width: 1px; |
||||
|
background-color: #fff; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mg-auto { |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.clearfix { |
||||
|
&::after { |
||||
|
content: ""; |
||||
|
height: 0; |
||||
|
display: block; |
||||
|
clear: both; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 字体或者什么的用em,距离用% |
||||
|
@function em($v, $f:16) { |
||||
|
@return $v/$f+em; |
||||
|
} |
||||
|
|
||||
|
$designWidth:1920px; |
||||
|
@function per($v) { |
||||
|
@return $v/$designWidth+'%'; |
||||
|
} |
||||
@ -0,0 +1,42 @@ |
|||||
|
:root { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
html, |
||||
|
body { |
||||
|
width: 100%; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.border-right::after { |
||||
|
position: absolute; |
||||
|
content: " "; |
||||
|
height: 100%; |
||||
|
width: 1px; |
||||
|
background-color: #fff; |
||||
|
top: 50%; |
||||
|
-webkit-transform: translateY(-50%); |
||||
|
transform: translateY(-50%); |
||||
|
} |
||||
|
|
||||
|
.mg-auto { |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.clearfix::after { |
||||
|
content: ""; |
||||
|
height: 0; |
||||
|
display: block; |
||||
|
clear: both; |
||||
|
} |
||||
|
|
||||
|
.box1 { |
||||
|
width: 5.20833%; |
||||
|
margin-top: 2.23958%; |
||||
|
height: 0; |
||||
|
padding-bottom: 5.20833%; |
||||
|
font-size: 2rem; |
||||
|
background-color: red; |
||||
|
} |
||||
|
/*# sourceMappingURL=index.css.map */ |
||||
@ -0,0 +1,9 @@ |
|||||
|
{ |
||||
|
"version": 3, |
||||
|
"mappings": "AAEA,AAAA,KAAK,CAAA;EACH,SAAS,EAAE,IAAI;CAChB;;AACD,AAAA,IAAI;AACJ,IAAI,CAAC;EACH,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CACX;;AAED,AACE,aADW,AACV,OAAO,CAAC;EACP,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,gBAAgB,EAAE,IAAI;EACtB,GAAG,EAAE,GAAG;EACR,SAAS,EAAE,gBAAgB;CAC5B;;AAGH,AAAA,QAAQ,CAAC;EACP,MAAM,EAAE,MAAM;CACf;;AAED,AACE,SADO,AACN,OAAO,CAAC;EACP,OAAO,EAAE,EAAE;EACX,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,IAAI;CACZ;;AAcH,AAAA,KAAK,CAAC;EACJ,KAAK,EAJG,QAA2B;EAKnC,UAAU,EALF,QAA2B;EAMnC,MAAM,EAAE,CAAC;EACT,cAAc,EAPN,QAA2B;EAQnC,SAAS,EAdD,IAAS;EAejB,gBAAgB,EAAE,GAAG;CACtB", |
||||
|
"sources": [ |
||||
|
"index.scss" |
||||
|
], |
||||
|
"names": [], |
||||
|
"file": "index.css" |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
||||
|
<title>Document</title> |
||||
|
<link rel="stylesheet" href="index.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="box1">cxvccxvcxcvx</div> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,56 @@ |
|||||
|
$red: #ff0000; |
||||
|
|
||||
|
:root{ |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
html, |
||||
|
body { |
||||
|
width: 100%;//62.5%; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.border-right { |
||||
|
&::after { |
||||
|
position: absolute; |
||||
|
content: " "; |
||||
|
height: 100%; |
||||
|
width: 1px; |
||||
|
background-color: #fff; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mg-auto { |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.clearfix { |
||||
|
&::after { |
||||
|
content: ""; |
||||
|
height: 0; |
||||
|
display: block; |
||||
|
clear: both; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 字体或者什么的用em |
||||
|
@function em($v, $f:16) { |
||||
|
@return $v/$f+rem; |
||||
|
} |
||||
|
|
||||
|
$designWidth:1920; |
||||
|
// 距离用百分比 |
||||
|
@function per($v) { |
||||
|
@return percentage($v/$designWidth); |
||||
|
} |
||||
|
|
||||
|
.box1 { |
||||
|
width: per(100); |
||||
|
margin-top: per(43); |
||||
|
height: 0; |
||||
|
padding-bottom: per(100); |
||||
|
font-size: em(32); |
||||
|
background-color: red; |
||||
|
} |
||||
Loading…
Reference in new issue