首页手记关于我了解的适配篇

关于我了解的适配篇

标签：

Html/CSS Html5 JavaScript

这篇文章是我自己憋了很久之后才开始写的一篇文章，因为这篇文章所罗列的知识点比较单一。但是回头想了一想，其实是我之前对于每篇文章写的东西太复杂了，我想我正在改变我之前的一种做法。我会逐渐写一点自己在开发的时候遇到的困难，以及自己对这些困难一些粗鄙的意见。

一、事件的起因

在日常开发中你时常会遇到一种尴尬的情况--那就是你在开发前端的时候标记的尺寸只能在你开发的尺寸下面完美的呈现，在其他尺寸、屏幕下面会变得奇形怪状。正如如图所示的效果。
这就出现了两个问题：

1、在不同屏幕下面展示的效果一致，这就导致小屏幕的电脑需要借助滑动，并且在很多布局可能会存在显示不全或者换行的现象。
2、如果动态调整组建的宽度可能会导致组件变形或者显示不全。

了解过Android开发的程序员都知道，在Android平台现在适配有很多种方法：dp、linearlayout里面的weight、m(s,h,x,xx)dpi、直接根据屏幕尺寸计算等等。我在准备开发前端的时候还是希望能够达到触类旁通的效果。
接下来就直接向大家展示我的成果吧！

二、flex布局(类似linearlayout)

其实谈到这个布局呢？就得说一下，我是从之前开发react-native里面得到的灵感，我在这里说并不是炫耀自己有多好学，只是给大家抛砖引玉罢了，因为您学的每一门语言都是有其存在价值的。语言会过时的，但是思想是不会的。即使是未来的人工智能泛滥
flex是Flexible Box的缩写，翻译过来叫做弹性布局。反正用我拙计的英语看来这个就是一个灵活的盒子。至于更多更详细的介绍呢？请移步Flex 布局语法教程。

<head>
    <title>测试apk</title>
    <style type="text/css">
        .test{
            display: flex;
            flex-direction: row;
        }
        .test1 {
            width: 300px;
            height: 200px;
            background: yellow;
            float: left;
        }
        .test2 {
            flex: 1;
            background: blue;
            float: left;
        }
        .test3 {
            width: 300px;
            height: 200px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class="test1"></div>
        <div class="test2"></div>
        <div class="test3"></div>
    </div>
</body>

效果图如下：

其中注意的几点事项：

1、flex-direction是控制主轴的对其方向。可选值：row（横向） | row-reverse（横向倒序） | column（纵向） | column-reverse（纵向倒序）
2、自组建的flex是分割点，可选auto，none。
3、设为Flex布局以后，子元素的float、clear和vertical-align属性将失效（希望给读者看到这点）

但是这个虽然能解决部分适配的问题，但是这只是解决了一小部分的问题，可是还是存在有好多问题这个东西并不能解决。例如我想让不同分辨率的视图显示不一样等等。此时就需要谈到媒体查询了。

三、媒体查询介绍

媒体查询的作用：使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。反正话不多说直接上代码吧。

<head>
    <title>测试apk</title>
    <style type="text/css">
        .test{
            display: flex;
            flex-direction: row;
        }

        @media screen and (min-width: 1026px) {
            .test1{
                width: 300px;
                height: 300px;
                background: blue;
            }

        }
        @media screen and (max-width: 1024px) {
            .test1{
                width: 500px;
                height: 500px;
                background: yellow;
            }
        }
        .test2{
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class="test1"></div>
        <div class="test2"></div>
    </div>
</body>

效果如图所示

这里大概介绍了一下媒体查询的一些基础情况，那既然有了所谓的媒体查询那是不是能够通过这个东西写一个属于自己的媒体查询适配库呢？好的，接下来就继续介绍这个。

四、媒体查询罗列出属于自己的rem标准单位

前面也大致的介绍了一下媒体查询，如果我们真正的做到根据不同的视图显示不同的效果之后呢？那是不是可以根据这个东西写一套属于自己的通用标准呢？
首先介绍一下rem这个单位，rem 是由浏览器基于你的设计中的字体大小计算得到的像素值。我将这个单位类比成Android的dp，但是这个东西呢？需要自己做一套适配了之后才能达到dp的效果。
先用代码来介绍一下rem

<head>
    <title>测试apk</title>
    <style type="text/css">
        body {
            font-size: 16px
        }
        .test2{
            width: 10rem;
            height: 10rem;
            background: red;
                        font-size:1rem;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class="test2">im rookie</div>
    </div>
</body>

这里将body中的font-size设置成16px，然后直接将body内的元素test2直接用rem做长度单位，字体也直接用rem。得到的效果图就如下所示：

哇，一想到马上就可以开始写这个了就突然兴奋起来了。先写点实例来看看效果，是不是和预想的效果一致。
代码如下：

<head>
    <title>测试apk</title>
    <style type="text/css">
        @media screen and (min-width: 1026px) {
            html {
                font-size: 30px;
            }
        }
        @media screen and (max-width: 1024px) {
            html {
                font-size: 10px;
            }
        }
        .test2{
            width: 10rem;
            height: 10rem;
            background: red;
        }
    </style>
</head>
<body>
    <div>
        <div class="test2">im rookie</div>
    </div>
</body>

达到的效果图如下：

五、结合js做定位布局

具体的代码如下所示：反正就是根据你要要的大小进行动态的调整。（在js里面直接计算会损耗页面性能哦）代码参考github

(function(designWidth, maxWidth) {
    var doc = document,
    win = window,
    docEl = doc.documentElement,
    remStyle = document.createElement("style"),
    tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }

    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
    refreshRem();

    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);

六、缩放结合媒体查询适配

当然在实际的开发中如果对于像我这样没有经验的小伙儿，要给一个大的项目做适配无疑是一件很困难的事情。当然对于那种比较复杂的布局单独的做媒体查询，将会造成很大的工作量。这里其实可以结合媒体查询可以做很到一套很简单的适配。代码如下：

  @media screen and (max-width: 1024px) {
    .body {
      transform scale(0.75)
      width 133.5%
      height 133.5%
      transform-origin 0 0
    }
  }

效果如下：

七、响应式布局介绍

写了这么多，其实其中最专业的名次--响应式布局并没有向大家提及。Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。具体的效果可以参考实例1.
但是其基本的核心在于媒体查询，然后通过不同的宽度，通过媒体查询、百分比设计达到不同的效果。详细的介绍请参考详解响应式布局设计

七、写在最后

最后，其实五一的最后这几天其实自己玩耍的比较频繁，甚至都开始成天成夜的打游戏，仿佛一夜回到了大学时候。但是在我的心中其实还是有一个梦的，我希望我能在今年能够达到自己想要的地步，每次打开简书的时候，每次看到这么多来自各地、各个城市的朋友在鼓励我的时候。我就知道我可能对不起大家的期待。
幸好五一过去了。我的心也该收一收了，对于前端，可能大半年的开发有了一定的了解，但是到底了解多少心里知道。五一过了，十一就很近了。如果再不加油50个目标就是自己的黄粱一梦。

点击查看更多内容