适配要求
- 网页宽度必须和浏览器保持一致
- 默认显示的缩放比例为1.0
- 不允许用户自行缩放网页
适配设置
- viewport可以设置宽度
- 可以设置高度
- 可以设置默认缩放比例
- 可以设置是否允许用户自行缩放
- 可以设置最大缩放比例
- 可以设置最小缩放比例
meta标签，标准适配方案
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
淘宝的适配方案
- 页面的真实尺寸为设备的2倍或者3倍，同时meta的initial-scale设置为0.5或者0.333333
- 缩放为2倍还是3倍和屏幕像素比有关
- 这里要区分：物理像素(屏幕像素)和页面的尺寸单位px
- 物理像素：设备显示屏的最小可视颗粒的大小
- 视网膜屏，retina屏，显示同等质量(非矢量)的图片会出现模糊
- 如果像素比是2，就要使用2倍图，同时initial-scale=0.5，即可高清显示
- 综上，在高清显示屏中，使用标准适配方案会使图片失真
box-sizing
- 移动端要对元素设置box-sizing:border-box
- 因为移动端使用流式布局(百分比布局)，如果盒子宽度为100%，这时再设置border会使页面溢出，出现滚动条，如果给盒子加上box-sizing:border-box，这时再设置border会向内挤，避免出现滚动条
点击出现高亮
- 移动端a标签点击时会出现阴影高亮效果
- 清除方法：
-webkit-tap-highlight-color: transparent
rem适配方案
- 流式布局能解决适配问题，但也存在一些问题，另一种适配方案是采用rem布局
- 首先设置html的font-size，之后的单位值rem会根据html的font-size大小计算
- 例如html的font-size设置为20px，想要显示一个120px宽度的盒子，就设置width: 6rem;按此计算出rem完成页面的开发。
- 那么如何做不同大小的屏幕适配呢？就要算出不同设备下根元素html的font-size大小。
- 比如我拿到一个640的设计稿，这时候我规定html的font-size为20px，这个就作为1:1的方案
- 那么对于320的屏幕，比例就为320/640=0.5，所以我要设置320屏幕的html的font-size为0.5*20=10px;
- 同理，对于480屏幕的比例为480/640=0.75,所以在480的屏幕上，我就要设置html的font-size为0.75*20=15px;
- 之后可以通过media query或者js去根据不同屏幕的大小动态改变html的font-size大小，就可以做到适配。这里复制一段网上的通过js改变的代码
(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);
二倍图问题
- 使用二倍图可以解决图片不清晰问题
- 例如二倍图的大小为40x40，想让图片清晰可以将background的background-size属性设置为20x20，与此同时background-position也要同比例的缩小即可
- background的简写为：
background: url() no-repeat background-position / background-size
- 去除
![]()
下间隙的方法有：1.display：block 2.给body设置font-size: 0; 3.设置vertical-align: middle;
