您的位置：首页 > 移动开发

移动端自适应

2016-07-25 11:48 344 查看

实现形式


名称	描述	缺点
流式布局	百分比来定义宽度，高度大都是用px来固定。	大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调。
固定页面宽度	超出部分留白	大屏幕手机下看起来页面会特别小，操作的按钮也很小。
响应式		维护性难
viewport	js控制viewport 的 initial-scale	initial-scale越来越大，相当于拉伸网页，而使得在大屏幕的移动端设备下，文字、图片会变模糊。
rem

viewport

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=3.0 />

rem

@media only screen

@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}

@media all and (min-width:xxx) and (max-width:xxx){
/*这段查询的all是针对所有设备(有些设备不一定是屏幕，也许是打字机，盲人阅读器)*/
}

@media only screen and (min-width:xxx) and (max-width:xxx){
/*上面针对了所有设备，这段是只(only)针对彩色屏幕设备*/
}

js控制fontSize

!(function(doc, win) {
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize",
fn = function() {
var width = docEle.clientWidth;
width && (docEle.style.fontSize = 20 * (width / 320) + "px");
};

win.addEventListener(evt, fn, false);
doc.addEventListener("DOMContentLoaded", fn, false);

}(document, window));

js控制html标签

<html data-dpr="2" style="font-size: 82.8px; width: 100%; height: 100%; overflow: hidden;">

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 移动端

相关文章推荐

新的分享

章节导航