码迷,mamicode.com
首页 > 移动开发 > 详细

移动端适配rem

时间:2018-11-07 00:46:35      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:utf-8   fonts   scale   doctype   user   mini   doc   set   1.0   

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />

<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

<title></title>

<style>

*{padding: 0; margin: 0;}

.box{height: 200px; width: 16rem; background: red;}

</style>

<script>

(function(){

var html= document.documentElement;

var hWidth=html.getBoundingClientRect().width;

console.log(hWidth);

html.style.fontSize=hWidth/16 + "px";

})()

</script>

</head>

<body>

<div class="box"></div>

</body>

</html>

 

//比如在 iPhone5 1rem就是20px

 

 

移动端适配rem

标签:utf-8   fonts   scale   doctype   user   mini   doc   set   1.0   

原文地址:https://www.cnblogs.com/xiepei/p/9919841.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!