H5页面初始化样式\字体大小屏幕适配\兼容解决方案\开发技巧

// ***全局变量***
@base-w: 414;
@color-black: #333;
@color-y: #AF9C7C;



// ***字体在不同屏幕上进行等比适配，目的在于还原设计稿
以iphone6 页面宽度375px 初始化页面 ，详解 https://juejin.cn/post/6844904032201342984

@media screen and (min-width: 320px) { html{ font-size: 266.667% !important; } }
@media screen and (min-width: 360px) { html{ font-size: 312.5% !important; } }
@media screen and (min-width: 375px) { html{ font-size: 312.5% !important; } }
@media screen and (min-width: 400px) { html{ font-size: 333.333% !important; } }
@media screen and (min-width: 440px) { html{ font-size: 366.667% !important; } }
@media screen and (min-width: 480px) { html{ font-size: 400%!important; } }
@media screen and (min-width: 520px) { html{ font-size: 433.333%!important; } }
@media screen and (min-width: 560px) { html{ font-size: 466.667%!important; } }
@media screen and (min-width: 600px) { html{ font-size: 500%!important; } }
@media screen and (min-width: 640px) { html{ font-size: 533.333%!important; } }
@media screen and (min-width: 680px) { html{ font-size: 566.667%!important; } }\
@media screen and (min-width: 720px) { html{ font-size: 600%!important; } }
@media screen and (min-width: 760px) { html{ font-size: 633.333%!important; } }
@media screen and (min-width: 800px) { html{ font-size: 666.667%!important; } }
@baseFont: 50;

.f-16 {
    font-size: unit(16/@baseFont, rem); //在iphone6上展示字号为16px
}


// ***小于12号字体解决方案***
.f-10 {
    transform: scale(0.84); // fontsize：12px，缩小至10px
}