Web开发如何保证各种屏幕尺寸和分辨率下Text的感官效果一致？

我们公司在开发一款基于浏览器的阅读器。之前经验不足，把所有的文字大小都写成了px。

现在发现这样做问题很大，因为笔记本的尺寸很多，分辨率也是差异很大。导致同样的PX值，在有些本子上字很大（比如15寸屏幕，像素1366768），有些本子上字很小（比如13寸屏幕，像素19201080）。

我们希望做到“感光一致”，就是说用户看到的文字大小，在感官上是一样的。

请问如何系统地解决这个问题？
多谢大神指点！

javascript

html5 css

阅读 5k

10 个回答

得票最新

golden_freeman_china

1.8k1211

发布于
2016-03-21

更新于
2016-03-21

字体使用印刷刻度即可；可以做到再任意屏幕上都是1英寸大小，这样你就可以跳过烦人的分辨率和DPI的概念了；
HTML

<div id="xx"></div>

css

#xx {
  font-size: 1in;
}

PS:唯一不爽的是在超小屏幕上很X蛋，比如：AppleWatch上，真的就是1英寸，一屏幕四个字，X；可以考虑一下再超小屏幕上做响应式布局；

sugarball

962

发布于
2016-03-19

用rem，:D

DevWiki

3876

发布于
2016-03-19

类似安卓的dp...

yusoo

44621420

发布于
2016-03-19

主要是单位，可以用百分比、rem、vw之类的

ryerh

921

发布于
2016-03-19

了解一下 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);
}