移动端 项目总结

Posted LittleD

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端 项目总结相关的知识,希望对你有一定的参考价值。

  前言:刚完成一个简单的移动端项目,单从布局上来说,跟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>

 

以上是关于移动端 项目总结的主要内容,如果未能解决你的问题,请参考以下文章

移动端开发的一些技巧总结

Vue移动端项目总结

移动端 项目总结

解决移动端报错:Unable to preventDefault inside passive event listener due to target being treated as……(代码片段

移动端项目总结

移动端项目开发总结