// 响应式公式
// 1、根据sass计算px换算rem
/* sass公式计算
@function publicCompany($px){
$rem:192px;
@return ($px/$rem) + rem
}*/
// css样式
/* .container{
width:100%;
& .item{
width:publicCompany(574px);
height:publicCompany(374px);
background:url(4-13movepic_03.png);
margin-top:publicCompany(48px);
font-size:publicCompany(24px);
color:$color;
.test{
font-size:12px/120px;
border-#{$left}:1px solid $color;
}
}
}*/
function fontSize() {
var screenWidht = document.documentElement.clientWidth || document.body.clientWidth;
var htmlElement = document.getElementsByTagName('html')[0];
htmlElement.style.fontSize = screenWidht / 10 + 'px';
console.log(screenWidht)
window.addEventListener('resize', function(e) {
var screenWidht = document.documentElement.clientWidth || document.body.clientWidth;
var htmlElement = document.getElementsByTagName('html')[0];
var text = document.getElementsByClassName('item')[0];
console.log(text);
htmlElement.style.fontSize = screenWidht / 10 + 'px';
console.log(text.style.fontSize)
})
}
// 简写
window.addEventListener('resize', function() {
remFit()
})
function remFit() {
// 获取视窗宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//获取html
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth / 10 + 'px'; //求出基准值
}
// remFit()
// 2、正常的rem 使用rem换算 22px = 0.22rem
(function(doc, win) {
var docEl = doc.documentElement || document.body,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
console.log(resizeEvt)
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
recalc();
})(document, window);
一键复制
编辑
Web IDE
原始数据
按行查看
历史
