1.什么是flexible?
flexible是responsive的低端形态和基础。直观来说,在任何宽度的屏幕上,网页显示不会两边留白,相当于PC端的流体布局,两者的区别在于,流体布局的表现角度在于实现,flexible的表现角度注重结果。
网页的设计常用的后两种方式:
- response design:响应式设计
- adaptive design:适应型设计
关于像素的几个概念
- PPI(单位英寸像素):在一英寸内的像素数,此像素的大小决定了屏幕的显示质量
- Dpr(设备的像素比率):设备像素与css像素之间的比例,即一个设备像素中显示多少个css像素
物理像素:显示屏的最佳分辨率,即屏幕实际存在的像素行数乘以列数的数学表达式,是显示屏固有的参数,不能调节,其含义是指显示屏最高可显示的像素数。单位:px
逻辑像素:在不同大小的屏幕中 逻辑像素不同,可以根据需要来设定多少倍的px,如:1pt=4px
Retina屏:Retina是一种显示技术,可以将更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。最初该技术用于Moto Aura上,通常这种分辨率在正常观看距离下无法使肉眼分辨其中的显像单元,也 称为视网膜显示屏。
2.lib-flexbile
-
lib-flexible
是用来适配屏幕的开源库,可以直接使用阿里CDN:
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
-
lib-flexible
库的使用方法:在<header></header>
中添加对应的flexible_css.js,flexible.js
文件 -
此处应当使用内联js,在执行js后,会在
<html>
元素上增加一个data-dpr
属性,以及一个font-size
样式,js会根据不同的设备添加不同的data-dpr
值,同时会给html
加上对应的font-size
的值,因此,需要在所有资源加载之前执行这个js。页面中的所用元素都可以通过rem单位来设置 -
在引入
lib-flexible
需要执行的js之前,可以手动设置meta
来控制dpr
值,如:
<meta name="flexible" content="initial-dpr=2" />
其中initial-dpr
会把dpr
强制设置为给定的值。如果手动设置了dpr
后,不管设备是多少dpr
,都会强制使用手动设置的值。
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) { // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else { // 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
js做了这么几件事:
1.动态改写
<meta>
标签
2.给<meta>
元素添加data-dpr
属性,并且动态改写data-dpr
的值
3.<html>
元素添加font-size
属性,并且动态改写font-size
的值
- 字号一般不用rem
现在绝大多数的字体文本都是自带一些点阵尺寸,通常是16px
和24px
,所以我们不希望出现一些小数尺寸
在flexible
整个适配方案中,考虑文本还是使用px
作为单位,只不过使用[data-dpr]
属性来区分dpr
下文本字号的大小
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}
网友评论
(function(window){
var winW = document.documentElement.clientWidth || document.body.clientWidth;
document.documentElement.style.fontSize = winW / 10 + "px";
window.onresize = function(){
var winW = document.documentElement.clientWidth || document.body.clientWidth;
document.documentElement.style.fontSize = winW / 10 + "px";
}
})(window)