css - 苏宁易购M站
大家讲道理
大家讲道理 2017-04-17 11:23:01
0
2
509

最近看苏宁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的字体比例是如何计算而来的?

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全員に返信(2)
迷茫

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

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

いいねを押す +0
Peter_Zhu

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート