ブログの美化 (3): 携帯電話での完璧なブログ閲覧_html/css_WEB-ITnose

この記事は Lu Dabao のブログを参照しています

携帯電話でのブログパークの閲覧効果はあまり良くないので、2 つのステップで修正しましょう

ステップ 1:

次の HTML コードに js コードを追加しますページの上部

1 <script>2 var content = 'width=device-width, initial-scale=1 user-scalable=no';3 var viewport = document.createElement('meta');4 viewport.setAttribute('name', 'viewport');5 viewport.setAttribute('content', content);6 document.head.appendChild( viewport );7 </script>

2 番目のステップ:

CSS コードを変更します

Google Chrome f12 を使用してモバイル モードで閲覧し、変更を加えることができます

1 @media screen and (max-width: 768px){2 3             /*手机显示css代码*/4 5 }        

テンプレートが異なるため、CSS コード

1. サイドバーは CSS コード内で非表示にする必要があります

2.画像の表示サイズを設定します。そうでないと機能しません。 すべて表示

3. ページ全体のサイズに注意してください

レンダリング: