日志样式

网站电脑端正常而手机端右侧出现白边的解决方案

 在网站建设的时候有的手机站和电脑站为同一个,而电脑站显示正常手机站在右侧却有一个白边,这种情况如何解决呢?
   首先我们要分析一下出现这种情况的原因,完整哪个模块显示不正常,然后和正常的模块比较一下,我们就会发现这些模块的div宽度设置不同。有的是一个具体的数值有的是百分百显示的(如:第一个div设置的是width:100%;第二个div设置的是width:1200px;),而具体数值的可能在手机中这个模块是正常显示的,百分比的模块却右侧出现了白边。这时你就应该推断一下是不是这个百分比显示的和具体数值的不能很好的在一块玩耍了呢?这个时候你可以先修改一处的百分比为固定数值显示(如width:100%设置成width:1200px;),先不要管电脑的如何显示,看手机端是否已经正常(这个模块)。
   然后再想办法让电脑也正常,这个时候就应该有一个大体的思路了,电脑width:100%;是显示正常手机是width:1200px;显示正常,我们如何将他们分来来呢?这个时候就会用到响应式的一点知识了。
   解决方法:1、先确定一个或者多个区分点;2、然后把这些区间写进css对应的div就可以了。举例:
@media screen and (min-width: 1201px) { 
.footer {width: 100%}  }
@media screen and (max-width: 1200px) { 
.footer {width: 1200px} }
这样就可以把屏幕1200像素以上的用百分之百显示,而1200及以下的用1200px显示了,对应的问题也就解决了。