上海11选5走势图

移动端如何使用js来实现rem单位的布局(一)

关于移动端布局使用哪种单位,每个人都有自己习惯使用的单位。单位的使用是开发者比较头疼的一部分,很多人在谈到写移动端页面的时候,都觉得很恼火。因为要写n套css样式,然后用媒体查询做适配。

部分前端开发者会使用rem单位配合媒体查询来实现页面布局,但是也有很多开发者朋友用js来实现,下面就讲解一下用js如何实现这一效果。

首先要获取屏幕的宽度,然后根据屏幕大小的不同设置根节点的字体大小。

<script>
(function(){
	var html=document.documentElement;
	var hwidth=html.getBoundingClientRect().width;  /*获取屏幕的宽度*/
	//console.log(hwidth);
	html.style.fontSize=hwidth/16+"px";  /*根据屏幕大小的不同设置根节点的字体大小*/
})();	
</script>

这样用屏幕的宽分成16份就得出每份是多少了,如果是320像素下的宽除以16就等于20,也就是1rem=20px;如果是414像素下的除以16,就是1rem=25.875px;每个屏幕尺寸不同的情况下rem都有所不同,这样就达到了适配的效果。明白的小伙伴就赶快动手试试吧!

关键词:
返回列表

上海11选5走势图上海11选5走势图相关的文章

相关案例

上海11选5 上海11选5开奖结果 上海11选5开奖结果 上海11选5走势图 上海11选5走势图 悠洋棋牌 上海11选5开奖结果 上海11选5APP 悠洋棋牌 上海11选5