一个简单的响应式网站怎么做
龙兵科技 2015-10-24
一、界面的响应式
 
我们的网站需要根据屏幕的大小,自动缩放,完全适应页面的变化。这里可以用到一段代码
 
.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%;
 
}
 
这段代码的意思是,如果屏幕太小,列表溢出的文字会自动截断并显示省略标记“……”
 
 
 
一般我们最好了界面、图片和列表的响应式设置之后,整个网站就能适合绝大数的移动设备访问了。
门店小程序在线咨询