一、像素
设备像素:设备屏幕的物理像素,对于任何设备来讲物理像素的数量是固定的。
css像素:这是一个抽象的像素概念,它是为web开发者创造的。
记住:当你给元素设置了 200px 时,这个元素的宽度跨越了200个CSS像素。但是它并不一定跨越200个设备像素,至于会跨越多少个设备像素,就取决于手机屏幕的特性和用户的缩放了,举个栗子:
苹果手机的视网膜屏幕,是一个高密度屏幕,它的像素密度是普通屏幕的2倍,所以当我们设置 200px; 时,200个CSS像素跨越了400个设备像素。
如果用户缩小页面,那么一个CSS像素会明显小于一个设备像素,这个时候 200px; 这条样式中所设置的200个CSS像素跨越不了200个设备像素。
二、移动端的viewport
viewport是html的父元素
布局viewport:document.documentElement.clientWidth
视觉viewport:设备屏幕大小
设备像素比dpr:设备像素个数 / 视觉viewport的CSS像素个数 (公式成立的大前提:缩放比例为1)
理解<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width = device-width 布局viewport宽度 = 视觉viewport宽度;
initial-scale=1.0 页面初始缩放程度为1;
minimum-scale=1.0 页面最小缩放程度为1;
maximum-scale=1.0 页面最大缩放程度为1;
user-scalable=no 是否允许用户对页面进行缩放操作;
三、页面自适应方案
1、手淘方案
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
动态设置页面初始缩放程度让 布局viewport = 设备像素;
设置根元素font-size为布局viewport宽度的十分之一,至于为什么是十分之一看过一个说法 :使100vw = 10rem,方便计算;
宽度(基于psd)用rem;(不好算)
2、网易方案
以iphone6的psd宽度为750px为标准:
前提<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">;
规定psd的根元素font-size:100px,则实际页面根元素font-size:50px;
开发时测量psd尺寸除以100得到rem尺寸;
动态改变实际页面根元素font-size,无论在什么设备下,页面的总宽度都是7.5rem;
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
四、文字自适应
文字大小建议不要换算成rem,而是使用媒体查询来进行动态设置;
参考网易的代码片段:
@media screen and (max- 321px) {
body {
font-size:16px
}
}
@media screen and (min- 321px) and (max-400px) {
body {
font-size:17px
}
}
@media screen and (min- 400px) {
body {
font-size:19px
}
}
具体文字大小要多少个像素以设计图为准,但是这三个等级之间是有规律的;仔细观察发现,321px以下的屏幕字体大小比321px - 400px之间的屏幕字体大小要小一个像素,而321px - 400px之间的屏幕字体大小要比400以上屏幕字体大小要小2个像素。依照这个规律,我们根据设计图所在的像素区段先写好该区段的字体大小,然后分别写出另外两个区段的字体大小媒体查询代码就可以了。
详解见:https://blog.csdn.net/u013778905/article/details/70768958