target-densitydpi=device-dpi会使其他ui插件布局变小
东哥说:不用rem了,把meta改成这样
<meta name="viewport" content="width=720, user-scalable=no, target-densitydpi=device-dpi">
就可以直接上px...
这句target-densitydpi=device-dpi
是什么意思呢?
target-densitydpi
这个私有属性,它表示目标设备的密度等级,作用是决定css中的1px代表多少物理像素
target-densitydpi
值可以为一个数值或 high-dpi
、medium-dpi
、low-dpi
、 device-dpi
这几个字符串中的一个
当target-densitydpi=device-dpi
时, css中的1px会等于物理像素中的1px。
好像已经决定要废弃target-densitydpi
这个属性了,尽量避免使用这个属性。
当你不在项目中用一些UI插件的时候,它显示的没问题,的确没有使用rem的必要。
大部分手机端UI插件都是根据手机屏幕来展示它的大小,这时候,坑就出现了。
举个栗子~
iphone6屏幕大小是375*667
,当使用了target-densitydpi=device-dpi
,而width=720
时,也就是说当UI插件自认为是用了满宽度(375),实际上显示的是屏幕的(375/720)≈ 52%
。
px转rem片段
笔者当时的解决方案是,把px转回rem,但是那么多的css,每个px都手动转,想想头都大。
然后,第一时间,想到用正则表达式啊。
直接上代码
var pxCode = ""; // 一堆px单位的css代码
var remCode = cssCode.replace(/([0-9]*?\.)?[0-9]+px/g,function(res){
return (res.split(‘px‘)[0]/100) + ‘rem‘
}); // 一堆rem单位的css代码
px转rem小工具
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{ margin: 0; padding: 0; }
html,body{ width: 100%; height: 100%; }
.left{ float: left; }
.right{ float: right; }
.item{ width: 48%; height: 90%; border: none; position: relative; top: 5%; left: 0; }
.item textarea{ width: 100%; height: 100%; outline: none; resize: none; }
</style>
<body>
<div class="item left">
<textarea id="px"></textarea>
</div>
<div class="item right">
<textarea id="rem"></textarea>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(‘#px‘).keyup(function() {
var px = $(this).val();
var rem = px.replace(/([0-9]*?\.)?[0-9]+px/g,function(res){
return (res.split(‘px‘)[0]/100)+‘rem‘
})
$(‘#rem‘).val(rem);
})
</script>
</html>
时间: 2024-10-09 12:06:24