0

ここに私のウェブサイトがあります: http://foxweb.marist.edu/users/kf79g/contact.php

テスト Web サイト: http://www.responsinator.com/?url=http%3A%2F%2Ffoxweb.marist.edu%2Fusers%2Fkf79g%2Fcontact.php

私の連絡先ページでは、テキストとアイコンを含むフォームをすべての画面サイズでできるだけ大きくし、ページの中央に配置したいと考えています。特に、タブレットのような中サイズの画面 (テスト Web サイトのリンクを参照) では、ページに大量の余白があり、コンテンツ自体が非常に小さいことがわかります。だからこそ、ページ全体を大きくして見やすくしたいのです。

私のコードはすべて、これらのファイルの下のページ ソースにあります (ブラウザでソースを表示を右クリックした後):

screen_styles.css

screen_layout_large.css

screen_layout_small.css

screen_layout_medium.css

contact.php

私はそれを修正するために私の知識のすべてを試みましたが、うまくいかないことが証明されました. できる限り全体を中央に配置しようとしましたが、中型および小型の画面でも完全ではありません (測定値がずれていることを確認するには、フォームとアイコンがどのように設定されているかを参照してください)。小さな画面では、ページから少しはみ出すことでレスポンシブ デザインが台無しになります。これが終われば、いよいよ私のウェブサイトが完成します。できるだけ早くこれを完了する必要があるので、私を助けてください。何かお役に立てば幸いです。

4

1 に答える 1

0

メディア クエリを使用して (ブレークポイントの値を決定します)、#contact_section次の例のように新しいスタイルを設定します。

@media screen and (max-width: 640px){
    #contact_section {
        float:none;
        display: block;
        width: 96%;
        padding: 2%;
        box-shadow: none; /*if don't want any shadow*/
    }
}

p/s: 640px はブレークポイント値の例です

于 2013-06-25T02:12:31.910 に答える