首页 > 代码库 > 移动端项目开发总结
移动端项目开发总结
对于这次移动端页面开发,新接触到的东西不少,首要的一个就是响应式布局,在移动页面开发中,需要考虑到移动端各种不同的屏幕大小而使用不同的布局来呈现出想要的效果.在小屏幕的移动设备中.可能需要减少页面中的信息量,并且改变原有的布局方案,采用适用于移动端的布局方案.而在中等屏幕大小的移动设备中,如平板,则需要考虑横屏,竖屏等情况下的布局方案.由这些需求诞生出来的,就是所谓的响应式布局解决方案,响应式布局重点在于可以通过媒体查询来为不同屏幕大小的设备使用不同的CSS样式,在这种情况下就能够直接做到适应不同屏幕大小的设备,而不用为不同的设备写不同的页面,只需要一个HTML文件和CSS文件就能搞定.
要使用响应式布局首先需要在页面头部的元数据标签中设置viewport,并在其中设置响应式布局所需要的一系列参数."viewport"设置好后就可以在CSS中写入媒体查询来为不同屏幕大小的设备使用不同的布局方案.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,maximum-scale=1,user-scalable=no"> 6 <title>Title</title> 7 <style type="text/css"> 8 div{width:200px;height:200px;margin:200px auto;background-color:pink;} 9 @media(min-width:768px) and (max-width:1024px){10 div{background-color:beige;}11 }12 @media (max-width: 768px) {13 div{background-color:chocolate;}14 }15 </style>16 </head>17 <body>18 <div></div>19 </body>20 </html>
移动端项目开发总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。