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个小技巧一定要掌握
  6. 网站设计如何避免过度以及如何促进动画交互?
  7. 定制型网站建设为什么大受欢迎?费用包括哪些?
  8. 企业网站要如何才能做好优化工作?
  9. 网站设计如何才能得到用户的认可?
  10. 网站制作的主要组成部分及要考虑的要素