记一次自适应网页的操作

固定写法

含义

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

@ media的用法

css样式

body{
    background-color: blue;
}

横屏竖屏操作

/*横屏*/
    @media screen and (orientation: landscape){
        body{
            background-color: aqua;
        }
    }
    /*竖屏*/
    @media screen and (orientation: portrait){
        body{
            background-color: brown;
        }
    }

效果图

小案例 

html代码

    
    
    


    

        

            
页头
        
        

            
导航
        
        

            
主体
            

                我家养了一只小兔子，它很可爱。全身雪白，张着一对红眼睛，
                三瓣嘴，可招人喜欢了。特别是我喂它吃菜叶时的表情，它把
                俩只脚一抬，屁股一坐，竖起耳朵等着你喂它。它吃菜时，会
                发出嚓嚓嚓的声音。可是，好景不长，没养几天就让妈妈给送
                人了。我问妈妈，你为什么，要送人，妈妈说白天没人喂它，
                会饿死的。可是我很想念它，有时候做梦都会梦见跟它玩。
            
        
        

            
边栏
            

                Almost every child will complain about their parents
                sometimes. It is natural, because when people stay
                together for a long time, they will start to have
                argument. But ignore about the unhappy time, our
                parents love us all the time. No matter what happen
                to us, they will stand by our sides. We should be
                grateful to them and try to understand them.
            
        
        

            
页脚
        
    

CSS代码

*{
    margin: 0;
    padding: 0;
}
body{
    margin-top: 35px;
    text-align: center;
}
.container{
    width: 960px;
    margin: 0 auto;
}
#header,#navigation,#mainbody,#asider,#footer{
    height: 100px;
    line-height: 25px;
    background: #eee;
    margin-bottom: 20px;
}
#mainbody,#asider{
    float: left;
    height: 300px;
}
#mainbody{
    width: 620px;
    margin-right: 20px;
    background: tomato;
}
#asider{
    width: 320px;
    background-color: darkcyan;
}
#footer{
    clear: both;
}

@media screen and (max-width: 1200px){
    .container{
        width: 1170px;
    }
    #mainbody{
        width: 700px;
        margin-right: 30px;
    }
    #asider{
        width: 440px;
        background-color: blueviolet;
    }
}
/*流动布局*/
@media all and (max-width: 959px){
    .container{
        width: 100%;
    }
    #mainbody{
        width: 67%;
    }
    #asider{
        width: 30%;
        float: right;
    }
}
@media all and (max-width: 767px){
    #mainbody,#asider{
        float: none;
        width: 100%;
    }
}