- 我們需要知道設(shè)計(jì)師給到的設(shè)計(jì)圖，它是有個(gè)固定尺寸的扔罪，比如給到的圖是750px，我們不能固定就按圖中測量的大小寫死州刽，所以我們需要知道一個(gè)比例；
<script type="text/javascript">
window.onresize = setFontSize;
setFontSize();
function setFontSize(){
var designWidth = 750;
var windowWidth = document.documentElement.clientWidth;
if(windowWidth > designWidth){
windowWidth = designWidth;
}
document.documentElement.style.fontSize = 30 * (windowWidth / designWidth) + "px";
}
</script>
我們通過獲取設(shè)備瀏覽器視口的寬度,我們設(shè)定最大不要超過30px;
$brower_default_font_size: 16px !default;
html{
font-size: $brower_default_font_size;
}
@function pxTorem($px){
@return $px / $brower_default_font_size * 1rem;
}
兩者可以配合使用浪箭，sass默認(rèn)為16px怀伦，如果不加上面的js，始終都是以16px為基準(zhǔn)山林；
.header{
background-color: blue;
width:100%;
height:pxTorem(80px);
margin: 0 auto;
box-sizing:border-box;
.logo{
position:absolute;
left: 0;
top:0;
height:pxTorem(80px);
width: pxTorem(68px);
background-color:yellowgreen;
line-height: pxTorem(80px);
text-align: center;
color:#fff;
}
.nav{
box-sizing:border-box;
padding:0 pxTorem(68px);
height:pxTorem(80px);
background-color:skyblue;
color:#fff;
input{
box-sizing:border-box;
outline: 0;
height:pxTorem(80px);
width: 100%;
color:#333;
line-height: 150%;
text-indent: pxTorem(10px);
font-size: pxTorem(14px);
}
}
.btn{
position: absolute;
right:0;
top: 0;
height:pxTorem(80px);
width: pxTorem(68px);
background-color:yellowgreen;
line-height: pxTorem(80px);
text-align: center;
color:#fff;
}
當(dāng)然還有直接給html設(shè)定為62.5%的；
