0

この WordPress サイトをより流動的または応答性の高いものにして、異なる画面解像度で重複しないようにしています。

@media 属性は知っていますが、テーマ内でそれを実装する方法がわかりません。

これには簡単な「1-2-3」がありますか、それとももっと複雑ですか? 私が取り組んでいるサイトはWe Have Issuesで、レスポンシブまたは流動的かどうかはわかりませんが、このスクリーンショットに基づいて、そうではないと思います.

ソーシャル アイコンとフィードバックは、テキストと重なってはいけません。

ここに画像の説明を入力

誰でも提供できる助けをありがとう！

4

3 に答える 3

1

サイトやワードプレスのウェブサイトをレスポンシブにするには、cssメディアクエリを使用します。

これをheadタグの上のheader.phpファイルに追加します

<meta name="viewport" content="width=device-width, initial-scale=1.0">

次に、cssファイルにメディアクエリを追加します

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
 body {
  background: #000;
 }

}

その後、Webサイトが応答するようになります。もちろん、各サイズに応じてサイトのスタイルを設定する必要がありますが、上記で開始する必要があります。それをもっと説明しているこの投稿もチェックしてください。

于 2013-02-17T06:27:04.673 に答える
1

これは非常に難しい問題です。あなたが尋ねたい最初の質問はあなたのウェブサイトがモバイルデバイスを使用するトラフィックを持っているのを見つけますか？

Google独自のWeb分析などのWeb分析を使用してトラフィックを調査することをお勧めします。ブラウザ、OS、テクノロジー、場所などの情報を提供します。

次に、それが価値があるかどうかを本当に判断する必要があります。いくつかのツールがあり、私は通常お勧めします：http ://www.abookapart.com/products/sensitive-web-design

それは良い本であり、著者は本当に素晴らしい人です。

これを速くすることに関して。レスポンシブデザインを正しい方法で行うための迅速な方法はありません。それは、適切なニーズへの応答性をターゲットにすることです。

于 2013-02-17T07:21:20.860 に答える
1

これには簡単な「1-2-3」がありますか、それともはるかに複雑ですか？

はるかに複雑な私は恐れています。

「Flexibility3」を実行しているテーマは、適応性または応答性がありません。

@coletrainが言及しているように、メタタグを使用して初期ビューポートサイズを設定できます（注：これはサイトの応答性を高めるものではなく、デバイスveiwport内のサイトの初期スケールを設定するだけです）。

さまざまなビューポートサイズでWebサイトを適切に再生するには、いくつかのオプションがあります。

  • アダプティブレイアウトアプローチを使用します。これにより、メディアクエリ（Webサイト要素が新しいサイズ/レイアウトに調整される幅）に対して任意の数のブレークポイントを選択できます。ブレークポイントは通常、より一般的なビューポートをターゲットにするために選択されます。たとえば、ipadのポートレート/ランドスケープ+iphoneのポートレート/ランドスケープです。

これらのブレークポイントのそれぞれで、スケールダウンする必要があるサイト上のすべての要素の新しいディメンションを指定する必要があります（たとえば、＃wrap divの幅を減らす）。

このアプローチは、限られた数のビューポートサイズのみをターゲットにすることで根本的に欠陥があるため、人気を失っていますが、経験の浅い人にとっては、アクセスしやすい低さの果物かもしれませんhttp://uxdesign.smashingmagazine.com/2012/11/08/ ux-design-qa-with-christian-holst/。

  • レスポンシブ/流動的、この方法では、基本的に、レイアウト/構造に関連するWebサイトのスタイルの多くを修正し、剛体のピクセル値を本質的に流動的な％値に置き換える必要があります。

ここでの非常に大雑把な例-のような厳密な2列のレイアウトを考えると、次のような流動的な値を使用するように変更できます.postwrap。#sidebar

.postwrap {
width: 60%;
}
#sidebar {
 width: 35%;
}

レスポンシブは、正しく実装された場合、ますます多様化するモバイル環境の「将来の保証」として強くお勧めします。

  • （これは私があなただったら私がすることです）あなたはWordPressを使用しています、おそらくこのプラットフォームの最も強力な特徴の1つは、テーマを交換することによってあなたのサイトのルックアンドフィールを簡単に変更できることです。

質の高い無料のレスポンシブWPテーマが数多く存在するため、適切に設計されたモバイルフレンドリーなテーマを持たない理由はありません。グーグルそれ。

また、ソーシャルアイコンのオーバーラップの問題については、WPの機能を活用して、「1-2-3」ソリューションを探している場合は、いくつかの異なるプラグインを試してください。

編集： @stepquickが言及しているように、EthanMarcottteのレスポンシブWebデザインは素晴らしい読み物です（私の経験では、A Book Apartの本は「綿毛のない」優れたリソースになる傾向があります）。また、単にパッケージ化されたテーマを実装するだけでなく、もっと実践したい場合は、基盤http://foundation.zurb.com/（これはかなり素晴らしい）などのフレームワークを使用して独自のフレームワークを構築することから始めることもできます。

于 2013-02-17T07:24:46.570 に答える