我们公司在开发一款基于浏览器的阅读器。之前经验不足，把所有的文字大小都写成了px。
现在发现这样做问题很大，因为笔记本的尺寸很多，分辨率也是差异很大。导致同样的PX值，在有些本子上字很大（比如15寸屏幕，像素1366768），有些本子上字很小（比如13寸屏幕，像素19201080）。
我们希望做到“感光一致”，就是说用户看到的文字大小，在感官上是一样的。
请问如何系统地解决这个问题？
多谢大神指点！
请使用rem
阿里前端有一个移动端自适应的解决库。
不怕踩坑可以试下：https://github.com/amfe/lib-flexible
em吧~
px用在自适应上很不好。
用rem，:D
主要是单位，可以用百分比、rem、vw之类的
类似安卓的dp...
字体使用印刷刻度即可；可以做到再任意屏幕上都是1英寸大小，这样你就可以跳过烦人的分辨率和DPI的概念了；
HTML
<div id="xx"></div>
css
#xx {
font-size: 1in;
}
PS:唯一不爽的是在超小屏幕上很X蛋，比如：AppleWatch上，真的就是1英寸，一屏幕四个字，X；可以考虑一下再超小屏幕上做响应式布局；
了解一下 rem 布局就可以实现你的需求了
简单的大致实现如下：
// 在 <head></head> 元素中插入下面的代码
!function(){
var d = document.documentElement;
d.style.fontSize = d.clientWidth * 0.05 + 'px';
}()关于 rem 和设计稿上的 px 尺寸之间的转换，用 sass 写一个转换函数就可以了
// 以下是 SASS 代码
// 单位转换
// @param {int} $px - 设计图上的 px 大小
// @returns {rem} - 转换后的 rem 值
@function r($px) {
@return $px / 32 + rem;
}
// 然后所有的尺寸单位都用 rem 代替 px
body {
width: r(960);
}rem绝对首选！