前端关于移动端屏幕适配

时间 2019-11-19

标签前端关于移动屏幕适配栏目无线繁體版

原文原文链接

1.先谈一下几个概念
像素是度量的单位，能够理解为点
1.css像素
html中度量的单位用px来计算，在pc中每每 1 css px ＝ 1 物理像素
在不一样设备中1css像素对应不一样的设备像素(物理像素)
例如：iphone3分辨率是320*480 即 css 1px ＝ 1个物理像素；iphone4 分辨率640x960但屏幕尺寸没有改变，意味着同一块区域像素多了1倍即 css 1px ＝2个物理像素；
2.物理像素
表示每英寸所拥有的像素数目，数值越高，表明屏幕可以以更高的密度来显示图像
3.分辨率
显示器所能显示的像素多少，显示器能够显示的像素越多，画面就越精细，一样的屏幕区域能显示的信息就越多
4.PPI :是每英寸所拥有的像素（Pixel）数目
2.css那些单位
px：绝对单位，页面按精确像素展现

100%：不是固定的，根据父元素决定的

em：相对单位，基准点为父节点字体的大小，若是自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持
3.哪一种方法更适合来屏幕适配呢？
1.px?
很差用是由于无论在哪都是同样的值，因此形成很大的差异，好比font-size:14px,pc的14px比手机的14px要大
2.100%?
百分比布局时：div结构自适应，字体却不能适应，很差用
3.em?em等于当前元素下字体的大小
很差的地方是改一处就会形成乱了
4.vw,vh虽然很好用可是目前浏览器支持不老老高。
5.综合以上这里推荐rem,根据屏幕的宽设置rem，当屏幕变大，全部随之改变。
rem适配攻关点：
1.得到当前屏幕的大小
2.设置html的fontsize即rem
3.当屏幕大小改变，触发函数从新计算
4.用到的关于代码：
获取当前屏幕的大小用：
一、若网页中含有有了标准声明（即页面加上<!DOCTYPE html">这行代码，标准声明的存在会对document.body和document.documentElement的属性值有影响）时，
则应该使用document.documentElement
二、若网页中只有<html>而没有上面的一行代码，则JS脚本应该使用document.body
javascript

6.具体代码以下：css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>关于屏幕适配</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
width: 10rem;
height: 6rem;
background: red;
}
</style>
</head>
<body>
<div class="main">
我好你好你们好好好好好好
</div>
<script type="text/javascript">
// 不想手动刷新,但愿页面加载完毕的时候自动刷新
// 因此定义了一个匿名函数
(function(win,doc){
var fres=function(){
var html=doc.documentElement;
// 获取屏幕的宽
var w=html.clientWidth;
// console.log(w);
// fontsize设置成1/10大,即rem
// 设置fontsize
html.style.fontSize=w/10+'px';
}
// 若是页面加载完毕就调用函数fres(),
// 不然监听页面加载完毕，且完毕后fres();
// 页面加载完毕判断方法是从jquery中提取的
if(document.readyState==='complete'){
fres();
}else{
document.addEventListener('DOMContentLoaded',fres,false);
}

win.addEventListener('resize',fres,false);
})(window,document)

</script>
</body>
</html>html