移动端页面适配

说起移动端适配可能会有很多适配方案。

最开的适配方案回顾:

1.if(/Android (\d+\.\d+)/.test(navigator.userAgent)){

                var version = parseFloat(RegExp.$1);

                if(version>2.3){

                                var phoneScale = parseInt(window.screen.width) / 640;

                                document.write('');

               }else{

                                  document.write('');

             }

}else{

            document.write('');

}

上边的这种方式还好，让开发者可以正常以px单位去写移动端。如果你用火狐测试就会发现，因为userAgent检测不到Android的时候你写的东西在火狐测试上会乱掉。

2.通过media 去 控制不同屏幕宽度下的根元素的大小。假如设计稿的宽度是375，media中设置的根元素为18px，则假如一个元素在设计稿中width为180px,则180/18=10rem

@media screen and (min-width: 320px) {

        html {

              font-size: 16px;

         }

}

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

            html {

                    font-size: 18px;

            }

}

@media screen and (min-width: 414px) {

       html {

              font-size: 20px;

        }

}

@media (min-width: 750px) {

      html {

          font-size: 36px;

        }

}

除了以上这两种方案 可能还有很多。下边介绍一种很简单的适配方案

假如设计稿的宽度为375(iphone6)，则375/100=3.75， 除以100是为了换算rem的时候简单些

//根据JS设置根元素大小

document.documentElement.style.fontSize = deviceWidth /3.75 + 'px';

根元素如下:

假如设计稿中一个元素宽度为100px 则在编写css的时候他的 width:1rem(因为要除以100)；以此类推。在编写css的时候单位换成rem需要除以100。

但是！字体不推荐写成rem。

请对比下边两个页面

1.1

1.2

图1.1中 设置 外观/内饰:红色/黑色 这一行字体大小为0.14rem;

图1.2中 设置 外观/内饰:红色/黑色 这一行字体大小为14px;

会发现font-size单位为rem 字体在同一屏幕下显示偏小。而以px为单位会正常显示。

如果特殊情况需要 你也可以通过media去控制在某分辨率下的根元素大小。

我们清理下使用流程：

1看视觉稿的宽度。假如视觉稿宽度为375  则375/100=3.75 得到这个比例

2.

3.document.documentElement.style.fontSize = deviceWidth /3.75 + 'px'; 这段JS必须加上

4.CSS单位换位rem 视觉稿给你的标注都要除以100  例如视觉稿宽度显示100px  则你要写0.1rem

小坑:

高度不需要自适应的话建议根据视觉稿把高度写上。 否则会出现 在IOS设备显示上没问题，安卓显示下 字体会偏上。

*如果屏幕大于640则deviceWidth为640 或者是说你让路径跳到PC版本上，这里是你自己控制我不管了哦~

var deviceWidth = document.documentElement.clientWidth;

console.log(deviceWidth);

if(deviceWidth > 640) deviceWidth = 640;

document.documentElement.style.fontSize = deviceWidth /3.75 + 'px';