前端关于移动端屏幕适配
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端关于移动端屏幕适配相关的知识，希望对你有一定的参考价值。
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.用到的关于代码：
获取当前屏幕的大小用：
1、若网页中含有有了标准声明（即页面加上<!DOCTYPE html">这行代码，标准声明的存在会对document.body和document.documentElement的属性值有影响）时，
则应该使用document.documentElement
2、若网页中只有<html>而没有上面的一行代码，则JS脚本应该使用document.body
6.具体代码如下：
<!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>
以上是关于前端关于移动端屏幕适配的主要内容，如果未能解决你的问题，请参考以下文章