响应式布局之区分用户终端设备类型的常见方案

1. 后端

detectmobilebrowsers.com

2. 前端

2.1. JavaScript

/Mobile/i.test(navigator.userAgent)

2.2 CSS (SCSS)

2.2.1. 媒体查询们混着一起用更好,为了演示,分开写

$xsmall: 320px;
$small: 576px;
$medium: 768px;
$large: 992px;
$xlarge: 1200px;

body{
    .... 
    // 手机的默认样式(移动优先)
}
@media all (min-width: $xsmall) and (max-width: $small){ ... }
@media all (min-width: $small + 1) and (max-width: $large){ ... }
@media all (min-width: $large + 1) and (max-width: $xlarge){ ... }
@media all and (min-device-pixel-ratio: 16/9){...}	
@media all and (orientation: portrait){...}
@media all and (orientation: landscape){...}
@media handheld{...}

2.2.2. Bootstrap Grid System(Bootstrap的网格系统)等

中文网页字体常见策略

1. 黑体

font-family: -apple-system, system-ui, BlinkMacSystemFont, 
             "Helvetica Neue", Helvetica, 
             "PingFang SC", "苹方", "Hiragino Sans GB", "冬青黑体",
             "Microsoft YaHei", "微软雅黑",
             STHeiti, "华文黑体",
             Arial, sans-serif,
             "SimHei", "黑体",
             ;

上面遵循了这些原则:

  1. 注意:很遗憾,我无法提供支撑下面诸假设的实验数据。
  2.  优先选用系统默认的中文字体,因为:
    • 主流系统厂家都很重视字体,默认的字体往往在终端浏览器上显示效果很好
    • 与英文字体不同,由于目前技术的限制(中文字体文件太大),一般情况下,用户为了看到网页,我们要求他/她去下载一个几MB甚至十几MB大小的字体,这样的做法不切实际
  3. 优先设定苹果设备的字体,因为:
    • 由于微软Office for Mac在中国的流行,很多MacOS上有“微软雅黑”等微软的中文字体。在Mac电脑上安装Windows系统的用户在国内也不在少数。如果先规定微软系统的字体,我们将违背“优先选用系统默认的中文字体”的原则
  4. 优先设定英文字体
    • 一般英文字体不包含中文字体(看字体大小就知道了),而很多中文字体包含英文字体。但是中文字体中的英文字体效果参差不齐。一般浏览器看来,先规定的字体权重最大。因此,先写英文字体再写中文字体往往能让我们得到理想的中英文字体显示效果
  5.  字体家族选用黑体,因为:
    • 黑体的易读性(legibility)好,有利于信息的传播。尤其是在今天这个手机阅读的时代
    • 反感黑体的用户比较少;
    • 微软与苹果两大厂家给我们提供了优秀的黑体
  6. 中文字体先写英文然后写中文,是为了:
    • 标注而已,分行同理
  7. 最后的STHeiti,Arial,sans-serif以及SimHei(中易黑体,“黑体”就是它)是备选方案
    • SimHei在Windows XP就有,雅黑是Windows 7才有的。SimHei英文太丑,放到最后。而STHeiti等于是MacOS的SimHei
    • 抱歉,不特别照顾Linux内核桌面系统(Ubuntu以及Fedora等)的用户

2. 不设置

3. 不思考,用别人的方案

中文字体没有多少可玩的空间,大家的方案都差不多,例如这些

4. 别人决定

UI团队决定,UED团队决定,CTO,老板决定,反正不是前端决定。