前端几种常见适配方式的方法总结

几种检测浏览器大小方法

方法一:媒体查询（css3的新语法）

媒体查询可以用于检测很多东西：自动检测viewpoint（视窗）的宽度和高度；设备的宽度和高度；旋转方向（智能手机横屏或竖屏）；分辨率大小。

（一）直接写在css样式中

• 使用@media查询，可以针对不同的媒体类型类型定义不同的样式
• 使用@media查询，在重置浏览器大小的过程中，页面根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、android手机，平板等设备都用到多媒体查询
• 语法规范：

 @media mediatype and|not|only (media feature) {
        CSS-Code;
    }

注意

1、用@media开头，注意@符号

2、mediatype 媒体类型

值	解释说明
all	用于所有设备
print	用于打印机浏览
screen	用于电脑屏幕、平板电脑、智能能手机等

3、关键字and not only

值	解释说明
and	用来连接多种媒体特性，一个媒体查询中可以包含0或多个表达式，表达式可以是0或多个关键字，以及一种媒体类型。 如：@media screen and (max-width:800px) and (min-width:400px)
not	用来排除某种设备。比如，排除打印设备 @media not print；
only	指定某特定媒体设备

4、media feature媒体特性，必须有小括号包含。

值	解释说明
width	定义输出设备中的页面可见区域宽度。
min-width	定义输出设备中的页面最小可见区域宽度。
max-width	定义输出设备中的页面最大可见区域宽度

【举例】

common.less文件

//设置常见的屏幕尺寸，修改里面的html文字大小，常见的屏幕尺寸有320px/375px/384px/400px/414px/424px/424px/480px/540px/720px/750px
//如果在普通pc端打开，直接将html大小指定为50px，不再除以15等份。一定要写在最上面,因为样式具有层叠性
html{
    font-size: 50px;
}
//我们此次定义的划分份数为15
@part:15;
//320
@media screen and (min-width:320px) {
    html {
        font-size: 320px/@part;
    }
}
//360
@media screen and (min-width:360px){
    html{
        font-size: 360px/@part;
    }
}
//375
@media screen and (min-width:375px){
    html{
        font-size: 375px/@part;
    }
}
//384
@media screen and (min-width:384px){
    html{
        font-size: 384px/@part;
    }
}
……
……
……
//720
@media screen and (min-width:720px) {
    html{
        font-size: 720px/@part;
    }
}
//750
@media screen and (min-width:750px) {
    html{
        font-size: 750px/@part;
    }
}

(二) 针对不同的媒体设备外部链入不同的 stylesheets（外部样式表）

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

定义媒体查询的部分放在<link>标签内，用media属性标注，media="  媒体类型 and/not/only（媒体特性）"

【举例】

<link media="screen and (min-widtn:320px)" rel="stylesheet" href="css/index.css">
<link media="screen and (min-widtn:360px)" rel="stylesheet" href="css/index1.css">
<link media="screen and (min-widtn:375px)" rel="stylesheet" href="css/index2.css">

方法二：js自动获取浏览器宽度

1、window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数

 window.onresize = function() {}
 window.addEventListener("resize", function() {})

2、window.innerWidth当前屏幕的宽度

【举例】

  //1、窗口加载事件
    window.addEventListener("load", function() {
        var box = document.querySelector('div');
        //2、调整窗口大小加载事件，当触发时就调用相应的处理函数
        window.addEventListener("resize", function() {
            if (window.innerWidth <= 800) {
                box.style.display = 'none';
            } else {
                box.style.display = 'block';
            }
        })

    })

方法三：flexible.js插件(检测浏览器宽度、修改html文字大小)

1、手机淘宝团队出的简洁高效移动端适配布局，不需要再写不同屏幕的媒体查询，因为里面的js做了处理

2、原理是：自动把当前设备屏幕大小划分成10等份，不再需要媒体查询，不同设备下，元素大小的比例是一致的

3、我们要做的就是，下载并引入flexible.js文件，注意引入后最好检验一下是否引入正确，githup地址：GitHub - amfe/lib-flexible: 可伸缩布局方案

<script src="js/flexible.js"></script>

4、我们只需要确定好当前设备的html的文字大小（设计稿大小/10），将页面里各元素大小以rem值(页面元素的px值/html大小)表示即可，剩余交给flexible.js去自动处理适配不同

【举例】

页面引入flexible.js文件以后：