?? ?? ?? ???? ???? ?? ??? ?? ????? ??? ?? ?? ???? ?????. 2. ?? ?? ?? : 100% ? ?? : ??? ??? ??? ???? ??? ???? ?? ??; 3. EM ?? Rem Units? ???? ??, ?? ? ?? ??? ?? ?? ? ?? ??? ????? ???? ??????. 4. 16 : 9 ???? ???? ?? ??-?? ???? ?? ??? ?? ????? ?? ?? ? ???? ?????; 5. ?? ???? ??? ????? ?? ??? ??? ??? ?? ?????. ????? ??? ????, ?? ???, ??? ?????? ? ??? ??? ?? ?????? ?? ? ??? ???? ???? ?? ???? ? ??????.

CSS? ?? ? ??? ??? ????? ??? ?? ??? ??, ??? ? ???? ?? ????. ??? ??? ???? ???, ??? ? ?????? ??? ??? ??? ??? ????.

1. ?? ??? ??? ????? ??????

? ???? ?? ?? ?? ?? ????? ???? ??? ??? ?? ? ???????. max-width ???? ?? ???? ????????.

 .Blog-post {
  ?? : 90%;
  ?? ?? : 800px;
  ?? : 0 Auto;
  ?? : 20px;
  ?? ?? : 1.6;
  ?? ?? : 18px;
  ?? : #333;
}

• max-width: 800px ??? ?? ???? ?? ?????.
• width: 90% ????? ???? ??? ????????.
• margin: 0 auto ?? ??.

2. ?? ???? ??? ?? ? ???

??? ? ??????? ???? ????? ???? ????.

 .Blog-Post H1, 
.Blog-Post H2, 
.Blog-post h3 {
  ?? ? : 1.5EM;
  ?? ?? : 0.8EM;
  ?? ?? : 1.3;
}

.Blog-post img {
  ?? ?? : 100%;
  ?? : ??;
  ????? : ??;
  ?? : 20px 0;
  Border-Radius : 8px;
}

• max-width: 100% ??? ? ? ?? ?? ??? ?????.
• height: auto ???? ?????.
• display: block ? margin: 20px 0 ?? ??? ? ??? ?????.

3. ?????? ? ??? ???????

?? ??????? ???? ??????. ? ?? ????? ?? em ?? rem ?? ?? ??? ??????.

 .Blog-post p {
  ?? ?? : 1.5EM;
}

.Blog-post blockquote {
  ?? : #f9f9f9;
  ?? ?? : 5px ?? #007cba;
  ?? : 15px 20px;
  ?? : 20px 0;
  ?? ??? : ????;
  ?? : #555;
}

.Blog-post ?? {
  ?? : #eee;
  ?? : 2px 6px;
  Border-Radius : 3px;
  Font-Family : 'Courier New', Monospace;
}

4. ???? ??? ?? (? : ???)

YouTube ?? Vimeo ???? ?? ??? ???? ???? ????? ????.

 <div class = "Video-Wrapper">
  <iframe src = "https : //www.youtube.com/embed/..."frameborder = "0"allowfullscreen> </iframe>
</div>

 .Video-Wrapper {
  ?? : ??;
  ?? : 100%;
  ?? : 0;
  ??-?? : 56.25%; / * 16 : 9 ??? */
  ?? : 25px 0;
}

.Video-Wrapper iframe {
  ?? : ??;
  ?? : 0;
  ?? : 0;
  ?? : 100%;
  ?? : 100%;
  Border-Radius : 8px;
}

??? ?? ???? ???? ???? ??? ?????.

5. ??? ?? ??? ?? ?? (??? ?? ??)

?? ???? ?????? ?? ???? ?? ??? ??? ? ????.

 @Media (max-width : 600px) {
  .Blog-post {
    ?? ?? : 16px;
    ?? : 15px;
  }

  .Blog-post h1 {
    ?? ?? : 1.8rem;
  }

  .Blog-post h2 {
    ?? ?? : 1.5REM;
  }
}

????? ???? ????? ?? ??? ?? ??????.

????? ?? ? ??? ????? ??? ????.

• ???? ?? ??
• ?? ??? ? ???? ???
• ??? ????? ?? ?? ??????
• ???? ??? ?? ? ??? ??? ? ???

?? ??? ?? ?? ??? ???? ????. ??? CSS ??.

? ??? CSS? ?? ? ??? ??? ????? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!