聊聊移动端3种适配方式

  2007年第一代iPhone的发布，整个世界全面迎来了智能机时代，移动端页面也随即兴起，问题也随即出现了，移动端上如何去展示用户所需的内容啦，下面我们就来聊聊前端重中之中的移动端

一，meta viewport的出现
第一代iPhone发布时，乔布斯就初步解决了移动端适配问题，当时绝大多数的pc的物理像素为960px,布斯的决定是要让移动端的逻辑像素就为960px（实际上当时移动设备的物理像素远远没有达到），虽然解决了展示问题，可是用户体验也理所当然的差了，后面手机市场井喷发展，各种分辨率的手机层出不穷，问题也出现了，各分辨率手机展示皆有差异，meta viewport出现了，代码如下

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

  该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的，是否允许用户手动播放根据网站的需求来定，但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。

二，媒体查询
直接上代码，简单来说，就是利用css的性质，css的本质就是控制页面的样式，既然不同分辨率都不同，那么让前端有能力控制不同分辨率下的样式展示，通过@midia 我们可以设置不同的样式条件，随后浏览器根据当前条件去执行此时该执行的css样式

@media(max-width:800px) {
            body {
                background: red;
            }
        }

  媒体查询的两种设置方法：

1、写在页面内

 @media (min-width:700px) and (max-width:999px) {
            body {
                background: blue;
            }
        }

        @media (min-width:600px) and (max-width:699px) {
            body {
                background: red;
            }
        }

        @media(min-width:500px) and (max-width:599px) {

            body {
                background: pink;
            }
        }

        @media(max-width:499px) {

            body {
                background: yellow;
            }
        }

2、通过外链的方式

<link rel="stylesheet" href="style.css" media="(max-width:640px)">

三，REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

简单说明，rem是参照html标签的font-size大小，来决定ren单位数值大小的。

浏览器默认的字体大小是16px，相对应的rem数值就是1rem，当然你可以自动设置html 的font-size，比如把font-size设置为32px，那么当前页面32px===1rem了，那么就能自如的应对各种媒体设备了。

window.onload = function () {

        /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是

          为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/

        getRem(720, 100)

    };

    window.onresize = function () {

        getRem(720, 100)

    };

    function getRem(pwidth, prem) {

        var html = document.getElementsByTagName("html")[0];

        var oWidth = document.body.clientWidth || document.documentElement.clientWidth;

        html.style.fontSize = oWidth / pwidth * prem + "px";

    }

当然也可以采用scss，那么就不上面的js代码了。

最后编辑于：2018.09.07 09:07:04