2012-03-19 16 views
0

私は以前これをやったことがありません。私が作ったウェブサイトは、私が今までに作った2番目のウェブサイトです。メインコンテナdivとヘッダーがあります。私は、このシンプルなhtml/cssとjsサイトがモバイルデバイス上でひどく見えることに気付きました。私のウェブサイトの液体を作る方法は?

サイトの流体を作ることに関しては、それをすばやく簡単にするためのルールやアプローチはありますか?私がちょうどすべての設定ピクセル幅をパーセンテージに変え始めると、要素は互いの位置合わせを失いますか?たとえば、ヘッダー内のロゴの位置に基づいて、ピクセルを使用して、メインイメージスライダー内のイメージが整列されます。

私が作業を始める前に、どのような指針をいただければ幸いです。こちらのサイトです:www.hauswoods.comは

答えて

0

あなたのウェブサイトを流動体にしたい場合は、ピクセルではなくパーセンテージを使用してください。

.classname{ 
    width: 80%; 
} 
+0

感謝。私の懸念は、他の要素と関連してポジショニングを失うことです。現在のピクセル幅では、サイト上の他の要素に基づいてさまざまな要素が並んでいます。ドキュメント全体を1人でスケーリングした魔法のコード行しかなければ –

1

迅速かつ簡単な方法は、ブートストラップのようなフレームワーク(http://twitter.github.com/bootstrap/)

私はいくつかの確信しているを使用することです人々はあなたがそれを使うかどうかを学ばないと主張するでしょう(それはあなたのためにたくさんできるからです)。しかし、私はあなたが例で学ぶことができると思います。

ブートストラップは、UIを改善するために漸進的な強化原則を使用し、CSSを少し一般的にするために「Less」と呼ばれるものを使用します(複雑さを犠牲にして)。それでも、好きなビットを使うことができます。グリーンフィールドのサイトを持っているなら、それは始めるのに適しています。流体レイアウトをサポートし、小さな画面のモバイルデバイスでデザインがどのように劣化するかを説明します。

6

私はあなたの代わりにmedia queriesに見てお勧めします、これはあなたが異なる画面サイズに関連するCSSを指定することができます。はい、あなたはあなたのウェブサイトを液体/液体レイアウトに変更することができますが、現在のコンテンツでは、スライダとイメージを正しく見せることが頭痛になります。

関連する問題