前端编写⼿机兼容页⾯（简易⽅式）
  这两天开始编写⼿机页⾯，作为类似官⽹⼀样的使⽤，因为实在⼿机端访问的web端，没有做过尝试，⽽且由于⼿机的种类很多，导致兼容性要求很⾼，在⽹上了⼀些教程，制作完毕后决定分析给⼤家。
  先给⼤家看下成品效果图：
  这就是⼿机访问之后的样⼦了，那具体怎么做好兼容，⼜能省事省⼒呢，我从⽹上到了这个框架：
  直接百度：ydui，这是⼀个专门为移动端web前端使⽤框架，使⽤⽅式也很简单，打开这个⽹站点击开始使⽤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<!-- 引⼊YDUI样式 -->
<link rel="stylesheet" href="path/build/css/ydui.css" />
<!-- 引⼊YDUI⾃适应解决⽅案类库 -->
<script src="path/build/js/ydui.flexible.js"></script>
</head>
<body>
<div class="g-view">
</div>
<!-- 引⼊jQuery 2.0+ -->
<script src="apps.bdimg/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引⼊YDUI脚本 -->
好用的前端框架<script src="path/build/js/ydui.js"></script>
</body>
</html>
  这是测试页⾯，我们只需要下载这个框架的⽂件就⾏了，之后调⽤上⾯代码中调⽤到的css，以及js即可，之后所有的内容写在class为g-view的div中，这个框架就可以⾃动帮你调整兼容性了，需要注意的是，这是移动端框架，所以只⽀持移动端，如果是pc端或者平板访问可能就不会很兼容了。
  为了和团队开发⼤⼩规范，⼀般移动端的单位都是rem，所以不能再⽤px作为单位了，可是作为设计还是会给你px的图纸，为此我们就需要⾃⼰计算好单位换算即可。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。