第一期花式自适应网页哪家强？就选你啦

Posted 2020-07-03 妖精的理想乡

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第一期花式自适应网页哪家强？就选你啦相关的知识，希望对你有一定的参考价值。

咳咳. 麦克风测试ok...

那么第一届会议开始 ...

这次会议主题是手机web一些老生常谈的自适应问题。因为每个手机的系统不一样大小也不一样每个网页的排版也不一样。这个问题至今都还没有个正确的解但这是入门手机端网页的必须跨过的一道墙。那么究竟怎么解决这个问题了今天我有幸请了6位选手解答大家可以参考参考

这里我们以640px的设计稿为例不知道这是什么请问美术gg

请用chrome手机游览器模式游览选手连接

--------------------------------------------------分割线------------------------------------------------------

1号选手：弹性缩放

http://wx.starnet-social.com/test/dwj/index.html

核心代码：

优点：不管你怎么拉网页大小自动缩成最佳比例自适应能力超强手机电脑都可以看哦

缺点：略微破坏了设计稿的排版比列但可以和设计师讨论解决如何排版以至感觉不出来

2号选手: 单位转换

http://wx.starnet-social.com/test/dwj/index2.html

核心代码：
(function(win,doc){
     var h;
     win.addEventListener(‘resize‘,function() {
      clearTimeout(h);
      h = setTimeout(setUnitA, 300);
    }, false);
    win.addEventListener(‘pageshow‘,function(e) {
        if (e.persisted) {
            clearTimeout(h);
            h = setTimeout(setUnitA, 300);
        }
    }, false);
    var setUnitA=function(){
        doc.documentElement.style.fontSize = doc.documentElement.clientWidth/16 + ‘px‘;
    };
    setUnitA();
})(window,document);

优点：和一号选手一样也拥有弹性能力但没有通过scale属性变化实打实的大小

缺点：计算比较麻烦要理解其中原理rem和px的比例转换。如果想控制dom元素位移比较复杂 (transform属性) 比较难掌握

3号选手：最大化中心缩放

http://wx.starnet-social.com/test/dwj/index3.html

核心代码：

var a = document.documentElement.clientHeight,
s = document.documentElement.clientWidth;
function e(e, n) {
var t, i = s / a,
r = 320 / 504;
t = i > r ? a / 504 : s / 320;

$(e).css({
  "-webkit-transform-origin": n,
  "transform-origin": n,
  "-webkit-transform": "scale(" + t + ");",
  transform: "scale(" + t + ");"
});
};
e("#wrap",‘center center‘);

优点：和一号选手也很像通过scale缩放最大化中心大小

缺点：没有一号选手弹性能力那么强最大化后的中心区域没有完全覆盖手机整个屏幕但可以通过一些手段感觉不出来记得overflow取消掉哦

4号选手：像素化

http://wx.starnet-social.com/test/dwj/index4.html

核心代码：

优点：像pc端一样写很暴力很简单适合新手兼容性也不错也拥有一点点弹性能力而且属于1比1像素布局dom元素非常容易。适合功能性页面

缺点：手机端写法不美观　一般必须以<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">写表达手机页面比较好。因为只是以宽等比缩放部分小手机如4英寸手机无法看到整个屏幕内容。元素必须控制在高960线内。真实大小还是1比1 所以dom元素发生位移会比缩放版的消耗更多内存，使用scale效果可能会因为图片大小超过切图大小而失真。不建议动画。

5号选手：像素化-320

http://wx.starnet-social.com/test/dwj/index5.html

核心代码：
        document.addEventListener("DOMContentLoaded", function (e) {
      var w=e.target.activeElement.clientWidth>=1024?1024:e.target.activeElement.clientWidth;
            document.getElementById(‘wrap‘).style.zoom = w / 320;
        });

优点：选手4的优化版本优点和选手4一样。但因为是320大小更适合做绚丽的动画

缺点：缩放大小的代码有一定的莫名其妙的bug 而且这种写法也不美观。硬是变成手机端模式。弹性能力很差 resize后没法继续刷新大小。也和4一样部分小手机如4英寸手机无法看到整个屏幕内容。元素必须控制在高960线内

6号选手：百分比+media

http://wx.starnet-social.com/test/dwj/index6.html

核心代码：

@media screen and (min-width: 321px) and (max-width: 768px) {
...code

}

优点：最传统的写法最不容易出错的写法最符合w3c的写法

缺点：最难的写法要计算各种百分比各种手机尺寸一般还是会采用固定尺寸比较好属于辅助写法处理一些其他选手的一些兼容性bug

--------------------------------------------------分割线------------------------------------------------------

由于时间关系市面上还有很多千奇百怪的写法那么究竟哪家强呢？

博主基本上喜欢 1 3 4 根据实际情况而变化。不过 真正做到手机自适应的不是代码而是使用者的本人布局能力让用户感觉不出来这才是最好的自适应！