目前pc并没有像移动端那样,可以用rem单位这种一站式解决方案,因为pc需要考虑低级浏览器,媒体查询和background-size这些新属性都不能用。
设计稿:1920/(1080-190) = 2.16 自己测1920/945=2.03
14寸普通笔记本:1366/(768-190) = 2.36
参考网址
http://www.w3cmark.com/2016/pc-adaptation.html
参考网址
http://blog.csdn.net/sunshine940326/article/details/55194861
登录考虑
百分比布局结合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可以设置position为absolute后固定到内容底部