javascript - Web开发如何保证各种屏幕尺寸和分辨率下Text的感官效果一致？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

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

天蓬老师 2017-04-10 17:51:40

[JavaScript讨论组]

572

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

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

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

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

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(9)

PHP中文网2017-04-10 17:53:40 9楼

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

<p id="xx"></p>

css

#xx {
  font-size: 1in;
}

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

赞 +0

添加回复

高洛峰2017-04-10 17:53:40 8楼

用rem，:D

赞 +0

添加回复

高洛峰2017-04-10 17:53:40 7楼

类似安卓的dp...

赞 +0

添加回复

伊谢尔伦2017-04-10 17:53:40 6楼

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

赞 +0

添加回复

怪我咯2017-04-10 17:53:40 5楼

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

赞 +0

添加回复