Movable Type のサイトをレスポンシブ化

初めに

1: Movable Type のサイトをレスポンシブ化するにあたり、HTMLヘッダー と HTMLブログヘッダー に、viewport と レスポンシブ化用の css にブレイクポイントを以下のように設定しておきます。

viewport 設定
 <meta name="viewport" content="width=device-width">
レスポンシブ化するた為の css (css 名は任意　例:smart.css )に、ブレイクポイント として
 @media screen and (max-width:767px){　　　} としました。
{　　　} 内には、私の場合、通常の css いわゆる screen.css の内容をそのまま、smart.css にコピペし、レスポンシブに必要な箇所を修正、又は、display:none しながら作成しました。 

2: 次にテンプレートの、メインページと記事の以下の箇所を、タグで括ります。（タグ名は任意）

　～
<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>

これで準備は整いました。

レスポンシブ化に際しての最大のポイントは、IMG のサイズとフォントサイズの設定です。

画面のサイズによっては、IMG ファイルが大き過ぎたり、文字が小さ過ぎてたりして、読めなくなってしまいます。
以下、フォントサイズに関する箇所の css コードを抜粋したものです。

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 + 16px);  
           }
  } 
  
/* --　デフォルト設定の基準を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) の括りタグ 

後書き

　font-size を " % " にしたのは修正しやすい理由からです。
　実物の端末で確認はしていませんが、Google デベロッパーツールではスムーズに機能しています。
　又、固定化されている要素があれば、各横幅毎に、position: fixed; で調整する必要があるようです。