对于这次移动端页面开发,新接触到的东西不少,首要的一个就是响应式布局,在移动页面开发中,需要考虑到移动端各种不同的屏幕大小而使用不同的布局来呈现出想要的效果.在小屏幕的移动设备中.可能需要减少页面中的信息量,并且改变原有的布局方案,采用适用于移动端的布局方案.而在中等屏幕大小的移动设备中,如平板,则需要考虑横屏,竖屏等情况下的布局方案.由这些需求诞生出来的,就是所谓的响应式布局解决方案,响应式布局重点在于可以通过媒体查询来为不同屏幕大小的设备使用不同的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-768px) and (max-1024px){ 10 div{background-color:beige;} 11 } 12 @media (max- 768px) { 13 div{background-color:chocolate;} 14 } 15 </style> 16 </head> 17 <body> 18 <div></div> 19 </body> 20 </html>