目前pc并沒有像移動(dòng)端那樣,可以用rem單位這種一站式解決方案继效,因?yàn)閜c需要考慮低級瀏覽器撮胧,媒體查詢和background-size這些新屬性都不能用僻肖。
設(shè)計(jì)稿:1920/(1080-190) = 2.16 ? 自己測1920/945=2.03
14寸普通筆記本:1366/(768-190) = 2.36
參考網(wǎng)址
http://www.w3cmark.com/2016/pc-adaptation.html
參考網(wǎng)址
http://blog.csdn.net/sunshine940326/article/details/55194861
登錄考慮
百分比布局結(jié)合rem布局
function size() {
var winW = document.documentElement.clientWidth || document.body.clientWidth;
var winH = document.documentElement.clientHeight || document.body.clientHeight;
if(winH>578){
if( winW/winH > 1920/945 ){
document.documentElement.style.fontSize =? winW / 10 + "px";
}else if( winW/winH == 1920/945 && winW%winH > 1920%945 ){
document.documentElement.style.fontSize =? winW / 10 + "px";
}else{
document.documentElement.style.fontSize =? parseInt(winH * 1920/9450)? + "px";
}
}else{
document.documentElement.style.fontSize =? parseInt(578 * 1920/9450)? + "px";
}
}
})()
.top{
width:100%;
height:98/900*100%;
min-height: 98*(768-190)/900px;
max-height: 98px;
background: white;
}
后來覺得pc最好不用rem,放大縮小有問題
.all{
width:100%;
height:100%;
min-width: 1121px;
min-height:578px;
background: url(../../Images/bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
這樣把img替換為div.all,雖然使用了backgroud-size后只能兼容到ie9缅叠,但是更好控制悄泥,footer可以設(shè)置position為absolute后固定到內(nèi)容底部