| 移动端尺寸相关 | iphone5 | 含义 |
|---|---|---|
| css px | 320*568 | 逻辑像素 |
| dp | 640*1136 | 手机屏幕的实际像素尺寸 |
| dpr | 2 | 设备像素缩放比 |
| dpi/ppi | 326 | 单位英寸内的像素密度 |
公式一：
ppi= 屏幕对角线上的像素点数/对角线长度 = √ （屏幕横向像素点^2 + 屏幕纵向像素点^2）/对角线长度;
以iphone5为例，该屏幕分辨率为640px*1136px，4英寸。则点密度为 √ (640^2 +1136^2) /4 = 326ppi。
ppi越高图像越清晰，可视度越低，系统默认缩放比越大；（如PC图标）
在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr。
公式二：
设备像素比 ＝ 物理像素 / 设备独立像素
css px = dp/dpr
关系图
今日笔记如下：
一、viewport视口
viewport 就是指在移动端上显示网页区域的大小 或者说webView的大小 它并不等于浏览器可视区域的大小, 移动设备上的浏览器都会把自己默认的viewport设为980px或1024px,为了能在移动设备上正常显示pc网页, 但是这会导致一个问题,浏览器会出现滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
viewport
关于三个viewport的理论
layout viewport (布局视口) 就是浏览器默认的viewport大小 layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取
visual viewport (可视视口) 可以看到的区域大小 随用户的缩放而改变 visual viewport的宽度可以通过window.innerWidth 来获取
ideal viewport (理想视口) 最适合布局的视口,跟dpr有关,iphone的ideal viewport 为320,小米4c的为360.
二、利用meta标签对viewport进行控制
移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。
在移动端通常会添加如下标签
< meta name="viewport" content=
"width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no" >
//width 设置layout viewport 的宽度，
为一个正整数，或字符串"width-device"
//initial-scale 设置页面的初始缩放值，
为一个数字，可以带小数
//minimum-scale 允许用户的最小缩放值，
为一个数字，可以带小数
//maximum-scale 允许用户的最大缩放值，
为一个数字，可以带小数
//height 设置layout viewport 的高度，
这个属性对我们并不重要，很少使用
//user-scalable 是否允许用户进行缩放，
值为"no"或"yes", no 代表不允许，yes代表允许
这个name为viewport的meta标签到底有哪些东西呢，又都有什么作用呢？
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。
把当前的viewport width 设置成 device-width layout viewport 就会和 ideal viewport 宽度 相同
要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病
rem是什么？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
如我们通过js设置html的fontSize,
<script>
(function () {
size();
window.onresize = function () {
size();
};
function size() {
var winW = document.documentElement.clientWidth || document.body.clientWidth;
document.documentElement.style.fontSize = winW / 10 +'px';
}
})();
</script>
假如获取宽度为320，因为在运算里除以10，根元素的字体大小便为32px；：
在css里 我们想设置元素高度为49px
便可写
height:49/32rem;
//当然这样直接写可以借用less或sass等css预编译工具
有些理解的地方 希望以后在实践中可以体会到。
网友评论