// rem 单位换算:定为 75px 只是方便运算,750px-75px、640-64px、1080px-108px,如此类推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
@return ($px / $vw_fontsize) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750;
html {
font-size: ($vw_fontsize / $vw_design) * 100vw;
// 同时,通过Media Queries 限制根元素最大最小值
@media screen and (max-width: 280px) {
font-size: 17.06667px
}
@media screen and (min-width: 540px) {
font-size: 40px
}
}
html,body{
height: 100%;
}
// body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
margin: 0 auto;
width: 100%;
max-width: 540px;
min-width: 320px;
}
div,
p,
ul,
li,
h4,
h5,
h6,
input {
margin: 0;
padding: 0;
}
input:focus,
select:focus,
button:focus {
outline: none;
}
body {
padding-bottom: rem(80);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: rem(28);
line-height: rem(48);
color: #000;
background-color: #f5f5f5;
}
li {
list-style: none;
}
@import 'xxx.scss';
font-size: rem('测量的数字')