大丧失！css布局！

经常性的布局混乱——明明在自己的电脑上好好的，在别人的电脑上或者手机上打开的时候......

CSS上的问题是——照着设计图实现出界面不难，但是想要你的页面在不同屏幕的显示器上呈现出差不多相同的效果的话，就不是那么简单啦！

以前自己在写CSS的时候倒没考虑那么多，因为写出来的都是给自己看的，在自己的电脑上显现出来的和模仿的页面一样一样的就觉得自己叼叼的了，最近团队开始在做两个还算挺大的项目，我负责其中一个的前端实现。我把界面实现出来后，叫旁边的ios土豪用他的超大显示器看一下做的怎么样，打开以后就悲剧了，WTF,界面怎么变得好奇怪......

看了自己写的css样式，知道问题出在哪里了...在界面的一些地方我使用了绝对定位，而且用的是具体的像素像是  left：200； 这样的，别问我为什么不用百分比，因为有些人他就是喜欢不全屏浏览网页的，我要照顾到这些人打开我的网页之后感受，用百分比的话所有一切都会挤成一团的。但用了具体像素之后在大屏幕打开出问题了，500px在我的电脑上接近屏幕宽度的一半但在上面却只有几分之一...用移动端打开的话更是惨不忍睹...

 

解决办法——

*PC端移动端各做一份(响应式？)

本来想做成boostrap那种响应式的，但发现很麻烦呀，一不小心连PC端的布局都有可能弄乱了，反正又不是很复杂，而且PC端的很多样式在移动端那边都是可以复用的，所以干脆分开来做。。。在这里分享一段当检测到移动端浏览时自动跳转到移动端版本的js代码~

function check_mobile(){
    var sUserAgent = navigator.userAgent;            
    if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('iPhone') > -1 || sUserAgent.indexOf('iPad') > -1 || sUserAgent.indexOf('iPod') > -1 || sUserAgent.indexOf('Symbian') > -1) {

                location.href = '/mobile';            
            } else {

            }        
}

 

*pc端布局混乱解决办法（浮动！定位的话请注意~）

1 能不要使用定位的话就不要使用定位喽，虽然说定位是很方便的，但它带来的麻烦也确实多...尽量各种浮动，还有display：inline-block吧！还有如果使用了浮动，可别忘了对父级overflow：hidden 清除浮动啊！

2 迫不得已需要定位的时候，尽量在更小范围内的父级元素内定位，千万不要把body作为父级元素进行定位，比如像下面这个吧，在定位logo的时候，你就不要在整张背景所在的div内 position：relative ，然后再对logo以 position：absolute；left：100px； 这样来定位，先在整张背景所在的区域内再细分出一个区域吧，这里用红色边框标示了，让这个区域自动居中 margin：0 auto；position：relative ，然后对logo这样 position：absolute；left：2px 就行了，这样不管屏幕大小怎么变logo都会出现在她该出现的位置了...恩...没错就是这样...

 

*移动端布局注意！！

移动端布局的话，说真的要比PC端的要简单很多，因为需要展示的东西少呀，而且不用考虑兼容，各种css3动画选择器随便用~

因为项目需要才开始接触移动端的，看了不少文章后才开始动手，和PC端还是有些不同的。。。但也不多，主要就是...

1 meta标签

           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
           <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" />       

你要做移动端的话就直接复制粘贴过去吧，具体什么每一个meta标签是意思自己百度吧，还有就是布局方面的...

2 在移动端你可以无视兼容性使用css3的flex布局（弹性布局），真的超级方便啊，当当当当~