移动端 项目总结

　　前言：刚完成一个简单的移动端项目，单从布局上来说，跟pc端的方法大致相同。

　　移动端的页面排版更简单一些，基本以单行为基础，逐行排版。唯一要注意的尺寸问题，由于移动设备的尺寸大小各不相同，所以要考虑一个适应主流移动设备宽度的页面排版。一般最常用的就是行居中效果，这样排版一般不会因为屏幕宽度太小而出现挤压的问题。

　　这里还要提到一个移动设备的缩放问题。做出来的页面可能无法完全适合移动设备的屏幕宽度，因此需要在html文档中声明设备宽度：

<meta name="viewport" content="width=750,maximum-scale=1,user-scalable=no">

　　

　　动态设置页面尺寸

　　通常的元素尺寸单位一般会使用“px”像素。另外有一个基于根节点的尺寸单位“rem”。其特点是根据根节点所设置的大小，折算出元素的大小。

<style>
html{
    font-size:100px;
    }

p{
    font-size:0.2rem;
    }
</style>

这里的p标签算出的大小是 100px * 0.2 =20px。这样设置的好处是当页面大小发生改变的时候，可以设置根节点的基础尺寸大小，而等比例地改变页面内容的大小。

 

　　结合@media方法设置页面大小：

<style>
    @media (min-width:768px){
    html {
        font-size: 100px;
        }
    }    
    @media (max-width: 768px){
     html {
         font-size: 50px;     
          }   
    }    
    p{
        font-size: 20rem;
        }
</style>