纯css布局
html {
font-size: calc(100vw / 7.5);
}
//下面媒体查询用在pc端响应式
@media screen and (min-width: 600px) {
html {
font-size: calc(600px / 7.5);
}
}
@media screen and (max-width: 300px) {
html {
font-size: calc(300px / 7.5);
}
}
js处理
//移动端处理
function responseAdjust(width = 750) {
var htmlDom = document.documentElement
htmlDom.style.fontSize = htmlDom.clientWidth / width * 100 + "px"
}
responseAdjust()
window.onresize = function() {
return responseAdjust()
}
//配合响应式处理 大于600或小于300不在响应式
function responseAdjust(width = 750, minWidth = 300, maxWidth = 450) {
var htmlDom = document.documentElement
var clientWidth = htmlDom.clientWidth
if(clientWidth > maxWidth) {
clientWidth = maxWidth
}
if(clientWidth < minWidth) {
clientWidth = minWidth
}
htmlDom.style.fontSize = clientWidth / width * 100 + "px"
}
responseAdjust()
window.onresize = function() {
return responseAdjust()
}
视口单位换算
/* 定义基准 750或640 等等 */
$vw_fontsize: 75;
rem = ($px / 2 / $vw_fontsize) * 1rem;
