0

サイトのレスポンシブに問題があります。

テーマは玄武で、2 つのサイドバーが等しく、余白が狭くなるようにカスタマイズされています。

カスタム CSS コードは次のとおりです。

#main {
padding: 10px;
}
.main-wrap {
float: left;
margin-left: 1rem;
margin-right: 21rem;
}
#sidebar-primary-wrap {
float: left;
margin-left: 1rem;
margin-right: -21rem;
width: 20rem;
}

#sidebar-secondary-wrap {
float: left;
margin-right: -20rem;
position: relative;
width: 20rem;
}

http://mattkersley.com/responsive/で自分のサイトをチェックしたところ、240x320、320x480、および 768x1024 デバイスでレスポンシブの問題が発生しました。

誰かが @media のことで私を助けてくれますか?

4

1 に答える 1

1

@ user29769 要約すると、幅 240 ピクセルのサイト バージョンを最適化したい場合は、次のことができます。画面の左端と右端と記事の境界線の間 - 検索バーをヘッダーの下の別の場所に配置するか、検索バーのサイズを縮小して検索ボタンとキャンセル ボタンと同じ行に配置することもできます。

常にモバイル ユーザーの頭の中にありますが、何が便利でしょうか? また、統合された開発者 Webtool キットを Web ブラウザー (F12) で使用すると、多くのことに役立ちます。アダプティブ ビュー - 既存の CSS ルールを無効にし、計算されたものを表示する ... 多くの点で役立ちます

最後に、クリーンな作業を行いたい場合、メディア クエリは注意して使用する必要があります。画面の解像度をいくつか選択し、ある種の間隔レベルを作成します。[幅 < 240, 240 < 幅 < 460, 460 < 幅 < 768など...]

このようにして、メディアクエリを配置し、適切な適応コードをそれに貼り付けることができます. (解像度ごとに 1 つの css ファイルを作成する人もいます。私は個人的にすべてのメディア クエリを 1 つのファイルで作成します。好みの問題です)

/* for all screens with a width lower than 240px */
@media screen and (max-width: 240px) {
   .search-toggle-active.menu-search input {
      margin-left: 30px !important;
   }

   .search-toggle-active.menu-search .search-field {
      width: 12rem;
   }

   .main-wrap {
      padding:0;
   }
}

この小さなヘルプ通知が、応答性に関するいくつかの基本を理解するのに役立つことを願っています. さらに、問題の解決に役立つことを願っています

于 2015-04-10T06:40:54.517 に答える