1. font-family
body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}
Heiti SC Medium Heiti-簡体字中国語 ブラック
Heiti TC Light Heiti-Traditional薄いボディ
Heiti TC Medium 黑体 - 繁中黑
/* 移动端定义字体的代码 */body{font-family:Helvetica;}
2. rem とは何ですか?
多くの Web アプリは、スケーリングのベンチマークとして 320 幅を使用して行われ、最大スケーリングは 320*1.3 = 416 であり、416 までの基本的なスケーリングは互換性があります。 iPhone6 Plusの画面が壊れました。この方法はシンプルで粗雑で効率的です。ただし、一部の学生は、スケーリングによって使用中に一部のページ要素がぼやけると報告しました
html{ font-size:20px;}.btn { width: 6rem; height: 3rem; line-height: 3rem; font-size: 1.2rem; display: inline-block; background: #06c; color: #fff; border-radius: .5rem; text-decoration: none; text-align: center; }
全般標準
4. メディアクエリ設定を使用して適応することもできます
html { font-size : 20px;}@media only screen and (min-width: 401px){ html { font-size: 25px !important; }}@media only screen and (min-width: 428px){ html { font-size: 26.75px !important; }}@media only screen and (min-width: 481px){ html { font-size: 30px !important; }}@media only screen and (min-width: 569px){ html { font-size: 35px !important; }}@media only screen and (min-width: 641px){ html { font-size: 40px !important; }}
REM レイアウトについての説明は終わりましたが、パーセンテージ レイアウトを使用すると同じ効果が得られます。 、次の問題に直面する必要があります:
padding-top = (Image Height / Image Width) * 100%
.cover{position: relative; padding-top: 100%; height: 0; overflow: hidden;}.cover img{position: absolute; top: 0; width: 100%;}
参考記事
https://developer.mozilla.org/zh-CN / docs/Web/Guide/CSS/Media_queries
https://isux.tencent.com/web-app-rem.html
http://www.ghugo.com/mobile-h5-fluid-layout-for - iphone6/
http://alloyteam.github.io/Spirit/modules/Standard/