一、界面的响应式

 

我们的网站需要根据屏幕的大小，自动缩放，完全适应页面的变化。这里可以用到一段代码

 

.body{

 

  max-width:800px;

 

  margin:0 auto;

 

  padding:0;

 

}

 

这段css代码定义我们网站主体最大宽度是800px,小于800px会自动缩小，大于800px的屏幕，只显示800px，网站主体内容是居中的。

 

 

 

二、图片的响应式

 

我们的发现在手机端的图片经常超出屏幕的大小，这是因为你图片并没有跟着屏幕一起缩放。这里我们用到的代码是

 

img {max-width:100%;}

 

这段css代码就确定了图片永远不会大于他们的父容器了。

 

 

 

三、列表的响应式

 

在手机站双排列表，有的时候会出现列表文字重叠或者换行错位的问题。这是因为用户的屏幕太小导致的。要解决这个问题，用可以下面的这段css代码

 

li{

 

 float:left;

 

 diaplay:inline-block;

 

 overflow:hidden;

 

 text-overflow:ellipsis;

 

 whtie-space:nowrap;

 

 width:49%;

 

}

 

这段代码的意思是，如果屏幕太小，列表溢出的文字会自动截断并显示省略标记“……”

 

 

 

一般我们最好了界面、图片和列表的响应式设置之后，整个网站就能适合绝大数的移动设备访问了。