首页 > 代码库 > 移动端 项目总结
移动端 项目总结
前言：刚完成一个简单的移动端项目，单从布局上来说，跟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>
移动端 项目总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。