移动端 项目总结

Posted 2020-08-04 LittleD

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

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

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

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

　　

　　动态设置页面尺寸

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

1 <style>
2 html{
3     font-size:100px;
4     }
5 
6 p{
7     font-size:0.2rem;
8     }
9 </style>

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

 

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

 1 <style>
 2     @media (min-width:768px){
 3     html {
 4         font-size: 100px;
 5         }
 6     }    
 7     @media (max-width: 768px){
 8      html {
 9          font-size: 50px;     
10           }   
11     }    
12     p{
13         font-size: 20rem;
14         }
15 </style>