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的字體比例是如何計算而來的?
問題解答
回答1:使用了css3 里的媒體查詢, 當屏幕寬度為320px時改變html和body里的font-size 下面都一樣。 @media screen 媒體查詢
不過話說蘇寧做的還挺細致的
回答2:根據頁面分辨率不同顯示效果自主設定的,沒有特別的計算規則。
相關文章:
1. javascript - QQ第三方登錄的問題2. 前端 - @media query 使用出現的問題?3. docker 下面創建的IMAGE 他們的 ID 一樣?這個是怎么回事????4. node.js - mongodb查找子對象的名稱為某個值的對象的方法5. 運行python程序時出現“應用程序發生異常”的內存錯誤?6. html5 - datatables 加載不出來數據。7. 測試自動化html元素選擇器元素ID或DataAttribute [關閉]8. 利用IPMI遠程安裝centos報錯!9. javascript - 在 model里定義的 引用表模型時,model為undefined。10. spring-mvc - spring-session-redis HttpSessionListener失效

網公網安備