在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--&#91;if lt IE 9&#93;> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <!&#91;endif&#93;-->

1、布局宽度使用相对宽度。

2、页面使用相对字体

3、css背景图片自适应。css加载的background-image如何自适应大小呢,其实CSS3中是可以实现的,添加如下语句:background-size:100% 100%;

4、CSS3 media query是自适应网页设计的关键

@media screen and (max-width:980px){
    #pagewrap{
    width:94%;
    }
}
@media screen and (max-width:700px){
    #pagewrap{
    width:auto;
    }
}
<link rel="stylesheet" type="text/css"
    media="screen and (max-device-width: 400px)"
    href="tinyScreen.css" />

这个是css3相对不同分辨率的展示不同样式。

5、流动布局

“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。

.main {
    float: right;
    width: 70%; 
  }
  .leftBar {
    float: left;
    width: 25%;
  }

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现

6、img部分可以用js进行调整。

$(function(){  

var imglist =document.getElementsByTagName("img");  
//安卓4.0+等高版本不支持window.screen.width,安卓2.3.3系统支持  
/* 
var _width = window.screen.width; 
var _height = window.screen.height - 20; 

var _width = document.body.clientWidth; 
var _height = document.body.clientHeight - 20; 
*/  
var _width,   
    _height;  
doDraw();  

window.onresize = function(){  
    doDraw();  
}  

function doDraw(){  
    _width = window.innerWidth;  
    _height = window.innerHeight - 20;  
    for( var i = 0, len = imglist.length; i < len; i++){  
        DrawImage(imglist&#91;i&#93;,_width,_height);  
    }  
}  

function DrawImage(ImgD,_width,_height){   
    var image=new Image();   
    image.src=ImgD.src;   
    image.onload = function(){  
        if(image.width>30 && image.height>30){   

            if(image.width/image.height>= _width/_height){   
                if(image.width>_width){  
                    ImgD.width=_width;   
                    ImgD.height=(image.height*_width)/image.width;   
                }else{   
                    ImgD.width=image.width;   
                    ImgD.height=image.height;   
                }   
            }else{   
                if(image.height>_height){  
                    ImgD.height=_height;   
                    ImgD.width=(image.width*_height)/image.height;   
                }else{   
                    ImgD.width=image.width;   
                    ImgD.height=image.height;   
                }   
            }  
        }     
    }  

}  

})

相关文章:

  • 暂无相关文章