css - 苏宁易购M站

问题描述

最近看苏宁app的源码说是泄漏了，逐看了下他们的网站M站，发现有段css写的看不太明白，望大婶们指点：

html {font-size: 50px}body {font-size: 24px}@media screen and(min-width: 320px) { html { font-size: 21.33px} body { font-size: 12px}}@media screen and(min-width: 360px) { html { font-size: 24px } body { font-size: 12px }}@media screen and(min-width: 375px) { html { font-size: 25px } body { font-size: 12px }}@media screen and(min-width: 384px) { html { font-size: 25.6px } body { font-size: 14px }}@media screen and(min-width: 400px) { html { font-size: 26.67px } body { font-size: 14px }}

如上，那些body跟html的字体比例是如何计算而来的？

问题解答

使用了css3 里的媒体查询， 当屏幕宽度为320px时改变html和body里的font-size 下面都一样。 @media screen 媒体查询

不过话说苏宁做的还挺细致的

根据页面分辨率不同显示效果自主设定的，没有特别的计算规则。