2017 年 12 月 18 日

移动端相关技术说明

移动端页面字号说明

移动端大小适配方面,我们采用的技术是基于 iPhone 6 为标准尺寸,字号动态调整方案;

在 iPhone 6 环境下;按照设计稿中的 pt/px 转为 rem 相对单位。

基于 root 的字体大小,不同终端(分辨率)动态调整。即在不同分辨率下,字体的大小会等比调整。这样做的好处是,整段文字在不同分辨率的手机上是等比展现,而非完全相同。

如图:

北京网站建设资讯 - 移动端相关技术说明 - (1)

北京网站建设资讯 - 移动端相关技术说明 - (2)

iPhone 6 和 iPhone 6p 在 root 字体大小上分别为 10px 、11.04px

正是由于这个细微差距,则所有子元素的字体都会遵循该基础字号进行动态的比例调整。

如果不采用这样的技术,而是粗暴的使用固定 px 单位且不做媒体查询进行区别对待;则可能会出现,小屏手机字显大,大屏手机字显小,且由于相同字号但不同宽度导致的换行,造成样式上的差异等其他不可控渲染效果。

移动端页面字体说明

中文字体方面,使用我们定义好的黑体降级方案(英文字体会按设计稿定制显示)

分别为(有则优先显示,否则顺延):

Apple System,Helvetica Neue,Helvetica,Nimbus Sans L,Arial,Liberation Sans,PingFang,冬青黑,思源黑体,微软雅黑,文泉驿微米黑,文泉驿正黑,华文黑体,中易黑体,文泉驿点阵正黑

项目介绍: https://code.fimvisual.com/toolbox/fonts.css
演示地址:http://zenozeng.github.io/fonts.css/

最新文章

  1. 做好网站优化的作用有哪些
  2. 网站优化这个难题要如何处理?
  3. 网站建设中常见的误区都有哪些?
  4. 外贸网站建设需要注意的事项有哪些?
  5. 快速建站中网站导航的设计细节
  6. 网站优化容易忘记的重点有哪些?
  7. 网站优化的实用技巧,轻松提高网站知名度!
  8. 网站建设过程中的七个“不要”,一定要知晓!
  9. 北京网站建设的收费项目有哪些
  10. 企业网站建设要遵循什么原则