自宅サーバー備忘録

viewport 設定

レスポンシブ化するた為の css (css 名は任意　例:smart.css )に、ブレイクポイント として

@media screen and (max-width:767px){　　　}

{　　　} 内には、私の場合、通常の css いわゆる screen.css の内容をそのまま、smart.css にコピペし、レスポンシブに必要な箇所を display:none 又は、修正等しながら作成しました。

<.header>
<$mt:Include module="ヘッダー"$>
<./header>

<.div class="wrapper">
<.div id="content-inner">
～
<.main>
<.div id="alpha">
<.div id="alpha-inner">
～
<./div>
<./div>
<./main>
<./div>　!-- id="content-inner" の括りタグ
<.aside>
<$mt:Include module="サイドバー"$>
<./aside>
<./div> !-- class="wrapper"　の括りタグ
<.footer>
<$mt:Include module="フッター"$>
<./footer>

smart.css

/* --　画面(ブラウザ)の大きさが「767px」以下の時に、適用されます。-- */
@media screen and (max-width:767px){
body {
　　 font: Times New Roman, arial, helvetica, hirakakupro-w3, osaka, "メイリオ", sans-serif;
　　 -webkit-text-size-adjust: 100%;
　　font-size: 16px;
}
/* --　以下のコードはこのサイトを参考にしました。(https://web-design-textbook.com/recipe/text-responsive.html) -- */
@media (max-width:767px){
html {
　　font-size: calc((100vw - 320px) / 140 + 17px);
}
}
/* --　デフォルト設定の基準を16pxの62.5%、1rem=10px　とする　-- */
html {
　　font-size: 62.5%;
}
* {
　float: none;
　position: static;
}
img {
　 max-width: 100%;
　 height: auto;
}
.wrapper {
　 display: block;
　 margin: 0;
　padding: 0;
　 max-width: 100%;
　 min-width: initial;
}
main {
　margin: 0;
　 background-color: #FF0000;
}
aside {
　 width: 100%;
}
/* Layout */
.layout-wm #alpha {
　　 width: auto;
}
/* --　サイドバーは非表示にしていますが、横幅が 767px を越えると表示されます。-- */
.layout-wm #beta {
　　display: none;
}
/* -- 「font-size:100%」で 16px=1rem : 画面が縮小すれば font-size も小さくなるので、以下 横幅が 100px 変化する毎に font-size を 「 % 」で大きくしています。細かく区切ることによりスムーズに伸縮します。この場合は、720px ～ 320px の範囲で設定しています。( 大きい順に書かないと機能しないようです ) -- */
@media (max-width:720px){
.tfont {
　　background-color: #f8fcfc;
　　font-family: Times New Roman;
　　font-size: 130%;
　　line-height: 2;
　　 width: 100%;
　　padding-right: 0.625rem;
　　padding-left: 0.625rem;
}
}
@media (max-width:620px){
.tfont {
　　background-color: #f8fcfc;
　　font-family: Times New Roman;
　　font-size: 140%;
　　line-height: 2;
　 width: 100%;
　padding-right: 0.625rem;
　padding-left: 0.625rem;
　 }
}
@media (max-width:520px){
.tfont {
　background-color: #f8fcfc;
　font-family: Times New Roman;
　 font-size: 150%;
　 line-height: 2;
　 width: 100%;
　padding-right: 0.625rem;
　padding-left: 0.625rem;
　}
}
@media (max-width:420px){
.tfont {
　 background-color: #f8fcfc;
　font-family: Times New Roman;
　font-size: 180%;
　line-height: 2;
　width: 100%;
　padding-right: 0.625rem;
　padding-left: 0.625rem;
　}
}
@media (max-width:320px){
.tfont {
　background-color: #f8fcfc;
　 font-family: Times New Roman;
　font-size: 200%;
　line-height: 2;
　width: 100%;
　padding-right: 0.625rem;
　padding-left: 0.625rem;
}
}
} !-- 以外と忘れやすい @media screen and (max-width:767px) の括りタグ