移动端适配

发表于 | 分类于
| 字数统计: 1.5k 字

为了适应各种移动端设备，完美呈现现应有的布局效果,各个移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨下等比缩放。常见适配方案如: 固定高度宽度自适应、固定宽度，viewport等比缩放、Rem适配、像素比适配、vw适配、媒体查询等。

单位

  • px像素 px是固定单位,不会随着视口大的大小而变化
  • em 相对于当前元素字体大小,当前元素未设置字体大小则继承父级字体大小 默认 1em=16px em作为font-size使用时,相对于父元素字体大小 em作为宽高等其他属性使用时 相对于自身字体大小 例如默认 font-size:2em;width:2em; // width为64px
  • rem 相对于根元素(html)字体大小的单位,会随着根元素字体大小的变化而变化,默认1rem为16px
  • vw 和 vh 相对于屏幕(可视窗口宽度) 宽度100vw和高度100vh
  • vmin是指vw和vh中最小的那个,vmax是vw和vh中最大的那个
  • 百分比 动态单位,以当前元素的父元素作为参考进行计算

适配方案

  1. 固定高度，宽度自适应（百分比，flex布局）或者响应式
    高度固定(单位可以是px 百分比 auto) 常用flex布局或百分比宽度
  2. 固定宽度，viewport等比缩放
    设计图的宽度就是网页显示的宽度,动态改变视口的缩放比例,页面宽度写死
1
2
3
4
5
6
7
8
9
10
11
12
13
// 弊端: 统一宽度之后 无法做响应式,富文本编辑器上传的内容也会被缩放
var width  = window.screen.width,
  fixedW = 640,
  scale  = width / fixedW,
  meta   = document.createElement('meta'),
  mateAttr= {
    'name': 'viewport',
    'content': 'width=' + fixedW + ',initial-scale=' + scale + ',minimum-scale=' + scale +',maximum-scale=' scale + ',user-scalable=no'
  }
for (var key in metaAttr) {
  meta[key] = metaAttr[key]
}
document.head.appendChild(meta)
  1. Rem做宽度自适应,窗口为设备宽度
    根据屏幕的分辨率,动态设置html的文字大小，达到等比缩放的功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
(function(win){
  var docEle  = win.document.documentElement;
  var timer   = null;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
	function changeRem(){
		//获取矩形的宽高上下左右距离
	  var width = docEle.getBoundingClientRect().width;
		if(width > 640){  //兼容ipad就去掉
			width = 640;
		}
		var fontS = width/10;  //把设备宽度10等分
		  docEle.style.fontSize = fontS+'px'; //设置根元素字体大小
	}
  changeRem();
  //页面尺寸发生改变的时候在执行changeRem
  win.addEventListener(resizeEvt,function(){
    clearTimeout(timer);
    timer = setTimeout(changeRem,30);
  },false);
  //页面加载的时候,如果是调用缓存的话再执行changeRem
  win.addEventListener('pageshow',function(e){
    if(e.persisted){ //缓存
      clearTimeout(timer);
      timer = setTimeout(changeRem,30);
    }
  },false);
})(window)
  1. 像素比适配(rem做宽度,viewport缩放)
    物理像素(设备像素)--手机屏幕分辨率 独立像素(css像素)--屏幕宽度
    像素比 =物理像素 / 独立像素 window.devicePixelRatio
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var dpr = window.devicePixelRatio;
var scale = 1;
//检测设备，设置相应的像素比
if (!dpr && !scale) {
  var isAndroid = window.navigator.appVersion.match(/android/gi);
  var isIPhone = window.navigator.appVersion.match(/iphone/gi);
  var devicePixelRatio = window.devicePixelRatio;
  if (isIPhone) { // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
    if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
      dpr = 3;
    } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
      dpr = 2;
    } else {
      dpr = 1;
    }
  } else { // 其他设备下，仍旧使用1倍的方案
    dpr = 1;
  }
  scale = 1 / dpr; //meta 缩放比例
}
//动态生成meta
var metaEl = document.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (document.documentElement.firstElementChild) {
  document.documentElement.firstElementChild.appendChild(metaEl);
} else {
  var wrap = document.createElement('div');
  wrap.appendChild(metaEl);
  document.write(wrap.innerHTML);
}
  1. 直接给html设置font-size:13.33333vw 需要给body设置初始字体大小
1
2
3
4
//  body{ font-size:12px }
// 直接使用rem不需要js计算, 只需要在750设计图上得到的尺寸px直接除以100就可以得到rem的值
// 假设1rem=50px  则 100vw = 7.5rem = 375px 可以得出 1rem = 13.33333vw
// 例如  在设计图中元素宽高为  50px  则可以直接写成  0.5rem

移动端横竖屏切换

  • window.orientation 竖屏为0 横屏为90或-90
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function set_html_fontsize() {
  var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  var width = w > h ? h : w;
  width = w > 720 ? 720 : w
  document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + ~~(width*100000/36)/10000+"px;";
}
// 监听横竖屏切换
window.orientationchange = function(){
  set_html_fontsize()
};
window.onresize = function(){
  set_html_fontsize()
};
set_html_fontsize();

媒体查询

  • max-device-width和max-width的区别

    1
    2
    3
    4
    5
    6
    /* 1、max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。
    2、max-width是目标显示区域的宽度，例如，浏览器宽度。
    3、如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为“显示区域”即浏览器大小发生了变化。
    4、如果使用max-device-width，那么当手机由竖变横时，CSS是不执行的，因为“手机宽度”并没有变化。如果使用max-width，那么当手机由竖变横时，CSS是执行的，因为“显示区域”发生了变化。
    5、通常，面向“移动设备”用户使用max-device-width；面向“PC设备”用户使用max-width。
    */

  • link标签
    <link rel="stylesheet" type="text/css" media="screen and (max-width:767px)" href="phone.css" />
    如果屏幕宽度小于767像素(max-width:767px)就加载phone.css文件
    <link rel="stylesheet" type="text/css" media="screen and (min-width:768px)" href="phone.css" />
    如果屏幕宽度大于768像素(min-width:768px)就加载pc.css文件

  • css @media 媒体查询(不同屏幕大小使用不同的样式)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .d1{
      width:200px;
      height:600px;
      background:#000;
    }
    /*  超小屏幕 手机> */
    @media (max-width:768px){
      .d1{ background:skyblue; }
    }
    /*  小屏幕 平板 */
    @media (min-width:768px) and (max-width:992px){
      .d1{ background:#999; }
    }

    /*  中等屏幕 桌面显示器 */
    @media (min-width:992px) and (max-width:1200px){
      .d1{ background:blue; }
    }

    /*  大屏幕 大桌面显示器> */
    @media (min-width:1200px){
      .d1{ background:pink; }
    }
-------------本文结束感谢您的阅读-------------
0%