开篇先说一下移动端的几种布局的方式,现在常用的大致上分为以下四种,分别是1.静态布局(Static Layou) 2.流式布局(LIquid Layout),代表作有栅栏系统--网格系统3.自适应布局.4.响应式布局
开篇先说一下移动端的几种布局的方式,现在常用的大致上分为以下四种,分别是1.静态布局(Static Layou) 2.流式布局(LIquid Layout),代表作有栅栏系统-->网格系统3.自适应布局.4.响应式布局.5.弹性布局(rem/em布局)
在web上简单的静态布局就能很好的实现,在APP上个人推荐是rem+js是很不错的,只需要一份JS文件把font-size调节下就能搞定,就粘贴下供日后方便其他项目使用:
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘, recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = ‘100px‘; }else{ docEl.style.fontSize = 100 * (clientWidth / 375) + ‘px‘; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener(‘DOMContentLoaded‘, recalc, false); })(document, window);
这个根据个人屏幕尺寸可以自己调节,我的是把html的font-size变为100px,这样在处理时可以直接拿原图的单位px除100就得到了rem的单位了。
当然在index界面我们需要加一些meta标签进行手机端的兼容,主要有以下几种:
<meta lang="zh-cn"> <meta charset="utf-8"> ---->(声明文档中使用的字符编码) <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> ----->(移动端窗口) <meta name="screen-orientation" content="portrait"/> ---->(UC强制竖屏) <meta name="apple-mobile-web-app-capable" content="yes"> ---->(网站开启对WEB APP程序的支持) <meta name="format-detection" content="telephone=no"> ----->(禁止自动识别电话和邮箱) <meta name="full-screen" content="yes"> ---->(UC强制全屏) <meta name="x5-fullscreen" content="true"> ---->(QQ强制全屏)
其实关于meta的标签有很多,而且各种配置均不相同,具体的就不多阐述了。