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