用html和css写得页面要适应各种手机屏幕的话，写的时候要注意以下几点：
- 整体页面的宽度用百分之比表示，任意一个要设置宽度的元素都用百分比表示。比如在整体的上设 width:100%;
要适应各个手机，在头部加入以下几段代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
这段代码的具体意思是content属性值 :
width:可视区域的宽度，值可为数字或关键词device-width（设备的物理宽度）//这样就可以很大程度上的适应各个移动设备。而（width指的是页面宽度。）
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放在设置图片的时候要记得设置一张照片在页面上的宽度百分比。比如一张照片占一个界面的百分之30%。不能写死成孤单的px值，如果写死，就不能根据浏览器的大小（模拟手机屏幕大小）来进行图片的伸缩。
- 比如以下代码：
<div class="pic_all">
<img src="banli_1.jpg"/>
</div>
的css格式：
.pic_all img{
width: 100%;
}
这样我改变浏览大小，照片也是跟着改变的。 改变浏览器大小图片的效果显示：
说明照片都是自适应的。
当然更多手机移动端的适应还要结合响应式设计那些。这个只是初学者小结。
