适配,你懂适配吗
思考题
一个100x100,单位px的div在苹果6和苹果6p上的大小一样吗?
科普一下
- px, 单位像素
- dp, 物理像素
- dpr,设备像素比
- ppi,每英寸有多少个有用的像素
单位像素是相对单位
在同样一个设备上,每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第一方面的相对性);
在不同的设备之间,每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第二方面的相对性);
为什么大部分时候设计稿选择iphone6
随着苹果发布更多尺寸的大屏手机,加上Android生态中纷繁复杂的各种奇葩尺寸,移动设计全面进入“杂屏”时代。
没有别的原因,iphone6 只是中型手机的一个代表,从中间尺寸向上和向下适配的时候界面调整的幅度最小。
移动时代,我们如何做适配的呢
利用 rem 适配页面
var dc = document.documentElement;
var mt = document.createElement("meta");
mt.name = "viewport";
mt.content = "width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no";
dc.firstElementChild.appendChild(mt);
var autoSizie = function () {
var dw = dc.clientWidth;
var dpr = Math.min(window.devicePixelRatio, 3);
//dw / dpr > 750 && (dw = 750 * dpr);
window.remScale = dw / 750;
dc.style.fontSize = 200 * (dw / 750) + "px";
dc.dataset.dpr = dpr;
};
autoSizie();
window.addEventListener('resize', autoSizie, false);
复制代码
- 为什么是 200 * (document.documentElement.clientWidth / 750) + "px" ?
帧动画在部分机型上抖动问题
解决方案:
1.原始尺寸做动画,再用transform:scale()做缩放处理
2.采用svg替代方案,推荐方案
利用视口单位 vw 适配页面
div {
width: 10vw;
height: 10vw;
font-size: .12vw;
}
复制代码
这样的页面虽然看起来适配得很好,但是你会发现由于它是利用视口单位实现的布局,依赖于视口大小而自动缩放,无论视口过大还是过小,它也随着视口过大或者过小,失去了最大最小宽度的限制
解决方案:结合rem单位来实现布局
1.给根元素大小设置随着视口变化而变化的 vw 单位,这样就可以实现动态改变其大小。
2.限制根元素字体大小的最大最小值,配合 body 加上最大宽度和最小宽度
如何做横屏适配
对屏幕 resize 事件进行监听,当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度
var detectOrient = function() {
var width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight,
$wrapper = document.getElementById("J_wrapper"),
style = "";
if( width >= height ){ // 横屏
style += "width:" + width + "px;"; // 注意旋转后的宽高切换
style += "height:" + height + "px;";
style += "-webkit-transform: rotate(0); transform: rotate(0);";
style += "-webkit-transform-origin: 0 0;";
style += "transform-origin: 0 0;";
}
else{ // 竖屏
style += "width:" + height + "px;";
style += "height:" + width + "px;";
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
// 注意旋转中点的处理
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
}
$wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();
复制代码
解决横屏的dom适配问题
$vw_base: 375;
$vw_fontsize: 20;
html {
font-size: 20px; //不支持vw单位时,回退到px单位
font-size: ($vw_fontsize / $vw_base) * 100vw;
}
@media screen and (orientation: landscape) {
html {
font-size: 20px;
font-size: ($vw_fontsize / $vw_base) * 100vh;
}
}
复制代码
网页适配 iPhoneX
viewport-fit
iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:
- contain: 可视窗口完全包含网页内容
- cover:网页内容完全覆盖可视窗口
- auto:默认值,跟 contain 表现一致
env() 和 constant()
iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:
- safe-area-inset-left:安全区域距离左边边界距离
- safe-area-inset-right:安全区域距离右边边界距离
- safe-area-inset-top:安全区域距离顶部边界距离
- safe-area-inset-bottom:安全区域距离底部边界距离
// 需要适配 iPhoneX 必须设置 viewport-fit=cover,这是适配的关键步骤。
<meta name="viewport" content="width=device-width, viewport-fit=cover">
// 根据情况设置padding或者margin
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
复制代码
关于移动端适配,就说这么多了。
路漫漫其修远兮,吾将上下而求索···