移动端适配

移动端适配 rem 总结

面试必问:(代码)

1.自己写一个代码:

function remSet() {

var html = document.documentElement;

var deviceWidth = html.getBoundingClientRect().width;

html.style.fontSize = deviceWidth / 15 + 'px';

}

remSet();

window.addEventListener('orientationchange', function () {

var timer = setTimeout(remSet, 600);

});

2.使用淘宝的rem 布局呢:

标注稿宽度 / 10，如标注稿宽为750，标注稿基准字体大小为75；标注稿宽为640，标注稿基准字体大小为64；

使用步骤:

//引入文件

less 文件里面:

@rem:60rem; // 为什么是60 因为我的设计图是600

header{

width: 600/@rem;

}

3.现在可以使用 vw 和 vh

https://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

https://juejin.im/entry/59b00e46f265da2491513bcc

移动端,使用的比较多 vw 宽度 ,vh高度 1% == 1 vw 其余的类似

4.淘宝现在也修改适配方案了

https://github.com/amfe/lib-flexible

viewport

至于使用view适配 ,也有谢谢处理方案: (就是引入一段代码)

(function () {

var devideWidth = window.screen.width;

var targetWidth = 320;/* 设计图的大小*/

/* 数字 */

var scale = devideWidth / targetWidth;

var meta = document.createElement('meta');

meta.name = 'viewport';

/* 三个都需要设置为scale */

meta.content = 'user-scalable=no,initial-scale=' + scale + ',minimum-scale='+scale+',maximum-scale='+scale;

document.head.appendChild(meta);

})();

5.rem的详细了解

面试的时候,问了一下 rem 的62% WTF

https://www.cnblogs.com/beidan/p/5275379.html

1 html{font-size:62.5%;} 2 body{font-size:12px;font-size:1.2rem ;} 3 p{font-size:14px;font-size:1.4rem;}

据说:

浏览器的字体大小默认都是16px

100%=16px，1px=6.25%，所以10px=62.5%，

所以:

font-size:10px; --->font-size:62.5%;

2@图 标注的尺寸 ,除以一个10, 就直接可以用了

百分之62.5% 就是这么来的

6.其他的适配方法:

@media(bootstrap)

流式布局 百分比