移动端WEB页面适配

前言
公司开发一个项目，把安卓和IOS原生开发的同事加了进来，参与h5页面开发。测试时，发现各种适配问题。UI设计的同事问我：你们是不是没有按设计稿来的？检查一看，通篇是px,我做的em适配完全没有用到。因此整理一下移动端WEB页面适配问题记于此。

在这里也要吐槽一下，现在的公司为了省钱，一个人干了几个人的活，有的人还是跨语言开发。难怪很多人吐槽现在的互联网APP没有精品。

实现适配移动端WEB页面的几种方式

• 通过js判断，动态加载css样式
  根据适配的机型不同，动态加载css文件

  (function(win,doc){    var width = doc.documentElement.clientWidth;    var link =  doc.createElement('link');    if(wdth<=320){      link.href = 'min.css'    }else if(320<width&&width<375){      link.href = 'b.css'    }    .....  })(window,document)

• 通过meta标签放大或缩小
  根据meta标签,动态设置user-scalable,maximum-scale,minimum-scale的值

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

  该方法计算复杂，不宜实现

• 通过css3媒体查询，显示不同的样式
  css3支持媒体查询，可以根据 不同尺寸的屏幕显示不同的样式

  @media screen and (max-width: 300px) {     body {         background-color:lightblue;     } }

• 使用css的相对单位em或者rem

• 使用vh和vw

文章来源: 移动端WEB页面适配