移动设备分辨率的笔记

一.关于rem

移动端开发一般使用rem进行适配，1rem等于html的font-size的大小。所以你设置html的font-size为多少，1rem就等于多少。

二、关于分辨率

通常我们说的分辨率有两种：

1）一种是逻辑分辨率：单位pt，它也称为逻辑像素；

2）一种是物理分辨率：单位px，它也称为物理像素；

逻辑分辨率*某个倍数等于物理分辨率；

 

 其中Reader就是倍数，@1x等于1倍，@2x等于2倍，以此类推……

：pt和px的关系就是—— 1pt 里面有几个像素点

　　　　（比如 1pt里面有1个px，也可以有2个，3个，分别对应上图的@1x,@2x,@3x）

三、关于移动设备上的前端界面开发

一般来说，网页都会在一开始设置rem的大小

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

除以6.4或者7.5是最常见的，这个一般是根据设计稿的大小，如果设计稿为750px那么除以7.5，如果为640那么除以6.4，实际上你除以任何一个数字都是可行的，之所以要除以7.5或者6.4，是为了方便1rem等于100px,便于计算，把设计稿转为实际程序的前端页面。

注意：一般我们做移动端页面的时候，只使用rem来设计元素的长宽，而涉及到文字的大小，一般不会使用rem的,一般会根据css媒体查询来动态设置文字大小，至于为什么，我猜可能是rem适合自适应元素大小，但是用于文字，带来的视觉体验可能并不理想。当然还得具体情况具体分析，有的时候我觉得视觉效果差不多，那就别费劲去写什么媒体查询了。

本文章参考到的文章：

1.https://www.cnblogs.com/javascript9527/p/14929749.html

2.https://www.cnblogs.com/tu-0718/p/9596894.html

3.https://www.cnblogs.com/axl234/p/5156956.html