移动端界面注意事项

 

1. 需添加以下代码使尺寸适应于移动端

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<script type="text/javascript">
(function() {
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
rem = width / (BASE_WIDTH / ROOT_FONT_SIZE);
docEl.style.fontSize = rem + "px";
}
var tid = null, docEl = document.documentElement, BASE_WIDTH = 640, ROOT_FONT_SIZE = 100;
refreshRem();
window.addEventListener("resize", function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
})();
</script>

 2. 将html,body 设置成100%

html,body{width:100%; position:relative;}

 

3. px 改成rem

移动端界面的长宽单位为rem, px需按一下方式转换成rem:

            网页psd图片宽度需为640px; 其中某元素宽度为200px时，除以100则转换成2rem; 若网页图片宽度不为640px，如为1024px， 某元素宽600px, 则对应得rem 为 600/1024*640/100=3.75rem;

 

4.背景图片问题

背景图片的尺寸不对，需设置如下属性：

background-size: contain;

 

转载于:https://www.cnblogs.com/zcancandice/p/5731946.html