用HTML和css写的界面适应手机界面小结

用html和css写得页面要适应各种手机屏幕的话，写的时候要注意以下几点：

1. 整体页面的宽度用百分之比表示，任意一个要设置宽度的元素都用百分比表示。比如在整体的上设 width:100%;

2. 要适应各个手机，在头部加入以下几段代码：
   




   这段代码的具体意思是
   

   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 禁止缩放

3. 在设置图片的时候要记得设置一张照片在页面上的宽度百分比。比如一张照片占一个界面的百分之30%。不能写死成孤单的px值，如果写死，就不能根据浏览器的大小（模拟手机屏幕大小）来进行图片的伸缩。

4. 比如以下代码：
   
   
   
   
   
   的css格式：
   .pic_all img{
width: 100%;
}
   这样我改变浏览大小，照片也是跟着改变的。

5. 改变浏览器大小图片的效果显示：
   说明照片都是自适应的。

6. 当然更多手机移动端的适应还要结合响应式设计那些。这个只是初学者小结。