绝对像素: 在小屏幕正常或显大,在大屏幕显小。
百分比布局:
优点: 单层div可以实现等比布局
缺点: div嵌套过多会计算繁琐
flex布局:
优点: 可以使用flex容器布局
缺点: 只适合局部布局
单位rem em:
1rem = html的font-size, 默认16px
1em = 父级的font-size
优点: 采用rem, 改html的font-size就可以在各种屏幕上等比缩放
缺点: 要使用js控制html的font-size
window.onload = function() {
var w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = w/10 + 'px'
}
单位vw vh:
优点: 把屏幕分成100份,1vm=1%的屏幕,不需要js的参与。
viewport:
物理像素:物理像素又被称为设备像素,他是显示设备中一个最小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。
逻辑像素:一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素。
设备像素比(dpr) = 物理像素/逻辑像素
Viewport视窗:
viewport是严格等于浏览器的窗口。在桌面浏览器中,viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。
viewport就是浏览器上,用来显示网页的那一部分的区域。Ios及新版本浏览器默认viewport为980px。
viewport默认有6个属性:
width //设置viewport宽度,可以为一个整数,或字符串"device-width"
initial-scale //页面初始的缩放值,为数字,可以是小数
minimum-scale //允许用户的最小缩放值,为数字,可以是小数
maximum-scale //允许用户的最大缩放值,为数字,可以是小数
height //设置viewport的高度(我们一般而言并不能用到)
user-scalable //允许用户进行缩放,'no'为不允许,'yes’为允许
根据dpr的值来修改viewport实现1px的线?
解决方案:
1、动态生成mate标签
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
2、css3 transform:scale缩放
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx){
div{
……
transform: scale(0.5, 0.5);
}
}