CSS3移动端页面适配布局

CSS3

em

“em”是一个相对的大小, 相对的计算必然会一个参考物，那么这里相对所指的是相对于元素父元素的font-size。

<style>
    .box {
        font-size: 12px;
    }
    .box p {
        text-indent: 2em;
    }
</style>
<div class="box">
    <p>弹性盒子属性模拟器</p>
</div>

rem

root em是根据根节点元素html标签的font-size大小进行参照的。

html {
    font-size: 100px;
}
.box {
    font-size: .16rem; 
    width: 6rem;
}

在线px转em值的工具

媒体查询

/*
@media screen and (min-width:480px) and (max-width:767px){
  .box {width: 600px;}
}
@media only screen (min-width : 768px) and (max-width : 1200px) {
  .className {
    width: 600px;
  }
}
*/
/*iPhone 4-5s  竖版*/
@media only screen and (max-width:640px) and (orientation:portrait){
  .className {
    width: 600px;
  }
}
/* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
  .className {
    width: 600px;
  }
}
/*iphone 6 plus*/
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
  .className {
    width: 600px;
  }
}
@media screen and (orientation: portrait) {
  /*竖屏 css*/
} 
@media screen and (orientation: landscape) {
  /*横屏 css*/
}