设备像素(device pixel): 设备像素是物理概念，指的是设备中使用的物理像素。 比如iPhone 5的分辨率640 x 1136px。
CSS像素(css pixel): CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。 在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。
设备像素缩放比(device pixel ratio)：
1px = (dpr)2
- dp
比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。
参考链接： 前端工程师需要明白的「像素」 需要先弄清楚设备像素比了再往下看
动态 REM(仅以手机为例)
淘宝在用的手机页面方案（不是响应式方案） REM
是基于根元素html{font-zise： pageWidth;}
pageWidth
是页面的宽度,可以通过这个API
获取到document.documentElement.clientWidth
也就是说让1rem–>pageWidth，div{width: 0.5rem},div{font-size: 0.05rem;} 下面是构造的代码
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
var pageWidth = document.documentElement.clientWidth
var style = document.createElement('style')
var content = 'html{font-size:'+pageWidth+'px;}'
style.innerHTML = content
document.head.appendChild(style)
</script>
</head>
<body>
<div class="half"></div>
<div class="full">hello world</div>
</body>
打开控制台看到下面截图中的，构造成功
上CSS代码
*{margin: 0; padding: 0;}
.half{
width: 0.5rem;
height: 0.5rem;
background: red;
}
.full{
width: 1rem;
height: 1rem;
background: blue;
}
在电脑上面查看时，会看到宽度会存在一些差异；造成这样的原因是滚动条，它是html的，而不是body的,暂时还没有想到能获取不包含滚动条的方法 在手机上面是不会有滚动条出现的，滚动条是自己感知的
如果手机页面的宽度定为640px，字体是32px，换算成rem，32/640 =0.05rem 有点繁琐，能不能让640rem–>100%? 假设 1rem –> 1000px(屏幕宽度) 640rem –> 1000px; ==> 1rem –> 1000/640
html
<body>
<div class="half"></div>
<div class="full">hello world</div>
</body>
css
.full{
width: 640rem;
height: 640rem;
background: blue;
font-size: 32rem;
}
js
<script>
var pageWidth = document.documentElement.clientWidth //1000
var style = document.createElement('style')
var content = 'html{font-size:'+pageWidth/640+'px;}'
style.innerHTML = content
document.head.appendChild(style)
</script>
运行之后会在页面下方看到有滚动条出现
.full
的宽度达到了7680px 。。。
html
里面的font-size
小于12px
<style>html{font-size:0.8578125px;}</style>
结论： 1. 在PC上面浏览器默认字体大小是12px,若小于12px会自动提升到12px； 2. PC上 1rem 的值不要小于12px ，手机上面不会有这样的限制
解决方案： 只要让 1rem >= 12px 就行了 把这段代码少除以一个10，相应的css代码也一样
var content = 'html{font-size:'+pageWidth/640+'px;}'
若还是小于则再除以一个2 对于程序员而言16是个整数，2^4 除以什么数和设计稿有关，若是720px，除以的数最好可以和720有关
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
var pageWidth = document.documentElement.clientWidth //1000
var style = document.createElement('style')
var content = 'html{font-size:'+pageWidth/16+'px;}'
style.innerHTML = content
document.head.appendChild(style)
</script>
</head>
<body>
<div class="half">hello world hello world hello world</div>
<div class="half">hello world hello world hello world</div>
</body>
</html>
//css代码
*{margin: 0; padding: 0;box-sizing:border-box;}
.half{
width: 8rem;
height: 4rem;
background: red;
border: 1px solid black;
float: left;
}
/*
*推理
*16rem-->100%
*8rem-->50%
*所以在任何设备上刷新都可以看到.half占页面宽度的一半
*/
完整代码展示
为了解决rem在进行单位换算上的麻烦问题，设置html字体大小为font-size:62.5%，默认字体大小是16px， 即是16px*62.5%=10px；1rem=10px； 比如1.2rem=12px,1.4rem=14px,1.6rem=16px.
网友评论