移动端布局浅谈

最近做了几个移动端的项目，虽然以前也为写移动网页做过了一些准备，但第一次接触移动端的布局，所以踩了几个坑，趁着放假查阅下相关资料，顺道做个总结，也好给以后的自己做个交代

主要目录：

• 目前布局几种方式
• rem布局思路
• 我在kkk得到的思路

国内外各种设备的尺寸可参考：http://screensiz.es/phone

在移动端页面上最害怕遇到一件尴尬的事就是我们所开发出来的页面跟设计师所给的页面差别很大 再加上移动设备屏幕的大小不一出来的效果更是参差不齐，特别是小屏幕【出现错位是常见的事情】，当然这个不仅仅是前端的问题，和设计也是息息相关，有一些布局的确不容易在移动端上实现【虽然我们很努力的去实现它】

1.布局

A.传统经典定宽高布局，定死宽高，PC上常见布局方式，相对来说也是最基础的布局模式

有固定的版型大小，例如1200px，然后设置margin：0 auto；来居中，

针对低分辨率出现内容挤出body，出现空白的情况，可使用媒体查询给body设置等于版型宽度来避免

B.响应式布局，

.流式布局+媒体查询

 流式布局----------------用来解决不同宽度的布局问题，父级宽度不够的时候，子级节点会“挤下去”

媒体查询--------使用css3，根据屏幕分辨率进行不同的样式应用，

优劣：

这种布局通吃pc和移动端，做到精细处，两者的效果都很好，

缺点是媒体查询是有限的，也就是可以枚举出来的

对设计要求简单、清晰、复杂的设计稿会直接弄死前端，同时需要多个设计稿

css3低版本浏览器不支持

C:rem布局，

原理是，先按定高宽设计出来页面，然后转换为rem单位，

配合js查询屏幕大小来改变html的font-size，

最终做出所谓的完美自适应，兼容性强

淘宝实例：https://m.taobao.com/?sprefer=sypc00#index

不过我碰到一个问题，就是在某些手机 某些浏览器 某些网速 ................的情况下会出现，页面先根据16px来布局后然后再出现运行js布局的情况

，后来我发现是这样的一个情况

虽然我的写法是这样的$(function(){执行rem的代码}),也就是dom加载完后就马上执行，但是如果仅仅是操作html的font-size，那真的需要丢到body里面么，把js放在head里面不不会执行更快【悬念，回头验证】

通过这几天的对比，我发现rem其实不一定要配合js来使用，可以使用媒体查询来做

例如：

http://m.dx.com/

css：

@media only screen and (min-width: 641px)

html {

1. font-size: 125%!important;

}

@media only screen and (min-width: 561px)

html {

1. font-size: 109%!important;

}

@media only screen and (min-width: 481px)

html {

1. font-size: 94%!important;

}

html {

1. font-size: 62.5%;

}

http://m.vmall.com/#

media (max-width: 414px)

html {

1. font-size: 35.9375%;

}

@media (max-width: 432px)

html {

1. font-size: 37.5%;

}

@media (max-width: 480px)

html {

1. font-size: 41.667%;

}

@media (max-width: 540px)

html {

1. font-size: 46.875%;

}

@media (max-width: 640px)

html {

1. font-size: 55.556%;

}

@media (max-width: 720px)

html {

1. font-size: 62.5%;

}

只针对了几种分辨率进行设置html的font-size，我本来以为会出现错位的，但的确没有错位，

好吧，这是个问题，先来研究下这种情况该怎么做吧

一般情况下，我的设计师会给我一个640px宽的设计稿

那，我就会按照640的设计稿来切

先把我的js暴露下：

$(function(){

    var fixScreen=(function(){
        var viewW,
            nRem=$('html');
        function setWidth(num){
            function fixBind(){
                viewW=$(window).(width);
                viewW>num?viewW=num:viewW=$(window).(width);
                nRem.css("fontSize",viewW/16+'px');
            }
            $(window).on('load',fixBind);
            $(window)('resize',fixBind);
        }
        return{
            setWidth:setWidth
        }
    })();
    fixScreen.setWidth(640);//设置最多宽度

}）

    <script>
    (function() {
        var designWidth = 750,
            rem2px = 100;
        // var d = window.document.createElement('div');
        // d.style.width = '1rem';
        // d.style.display = "none";




        // var head = window.document.getElementsByTagName('head')[0];
        // head.appendChild(d);
        // var defaultFontSize = parseFloat(
        //     window.getComputedStyle(d, null).getPropertyValue('width')
        // );
        // d.remove();
        document.getElementsByTagName('html')[0].style.fontSize =
            ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%';
    })()
    </script>

整段代码的作用很简单，就是网页dom加载完毕以及浏览器窗口改变的时候【横屏和竖屏切换】的时候设置html的font-size,

例如一个div宽40px，那他相对应的rem就是1rem，用js+rem来布局就是如此，因为我们用js动态的操作html的font-size所以相对来说不需要太多的考虑分辨率的问题，当然过小的分辨率肯定会出现错位的情况，比较font-size在webkit下有最小值12px

再回到http://m.dx.com/网页的布局问题

其实他做的事情和我们上面的那段js所实现的效果是一样的，不过他的分辨率是写死的，针对特定的几种分辨率进行特殊的操作

先来看一张图

把重点放在最后一行，可以看到不管什么分辨率下，我们的元素的宽度【rem】都是没有改变的，我们需要操作的仅仅是html的font-size

这个是rem最大的一个优势

假设我们现在已经给html设置好了font-size：20px；也给元素设置了10rem，前提是我们是根据640设计稿来做的，

问题在于，我们不仅仅需要兼容640分辨率，如图所示我们现在需要兼容384的，那html的font-size怎么设置呢

举个例子：384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于20*0.6=12px，只需要设置font-size：15px。在不同设备的宽度计算方式以此类推。

css：

@media only screen and (min-width: 641px)

html {

1. font-size: 125%!important;

}

@media only screen and (min-width: 561px)

html {

1. font-size: 109%!important;

}

@media only screen and (min-width: 481px)

html {

1. font-size: 94%!important;

}

html {

1. font-size: 62.5%;

}

这些值就是这样而来的,个人虽然很不看好，

 毒药(2***********5)  17:17:04
rem布局，你之前那的那个媒体查询就对了
你想多了，媒体查询如果不准，就是你自己的问题。 

网友各种推荐，具体还得回去好好实际操作后再下结论，虽然实际是我查找几个网页都是这样并且没有问题

--------------------------2016-06-15-----------------------------------------------------------------------------------

“毒药”的回复的确有道理，是我那时候没有考虑到针对“指定手机分辨率”理解不够深入

这是我在KKK公司的时候写的reset css:

 @media screen and (min-width: 375px) { （d）

     html {
         font-size: 312.5%;
     }
 }
 @media screen and (min-width: 320px)  and (orientation: portrait) {(e)
     html {
         font-size: 266.6666666666667%;
     }
 }
 @media screen and (min-width: 375px)  and (orientation: portrait) {
     html {
         font-size: 312.5%;
     }
 }
 @media screen and (min-width: 414px)  and (orientation: portrait) {
     html {
         font-size: 345%;
     }
 }
@media screen and (min-width: 640px) and (orientation: portrait) {
    html {
        font-size: 533.3333333333333%;（B）
    }
}
@media screen and (min-width: 750px) and (orientation: portrait) {
    html {
        font-size: 625%; （A）
    }
}

注解:

（A）：我们希望手机端上屏幕宽为750px以上的页面的html的字体大小为100px,

手机端默认字体大小为16px，（100%16）*100%等于625%

（B）( 640/750)*625%=533.3333333333333%

           (C) 字体大小和设计稿大小没关系，

   

          (d) 非竖屏下的字体大小，严格来说不管字体大小是多少 基本都不会导致错位，这是会出现没法全屏铺满屏幕，

 

         (e):竖屏的字体大小，微信下可以只针对竖屏

    更多分辨率，请查询相关手机出的参数并结合项目兼容要求进行处理，

---------------------------------------------本篇文章暂时到此结束------------------