0

このWebサイトwww.emblematiq.comでは、レイアウトは流体/液体です。私はコードを見ていましたが、それがどのように達成されるのか理解できないようです。canvas要素の幅が1180pxの固定幅レイアウトのように見えます。

見つからないようです

  1. CSSのメディアクエリ。
  2. 幅は％ではなくpxで設定されます。
  3. 関連するJavaScript/jQueryはそれに関連していないようです。

私は明らかな何かを見逃していると確信していますが、私の人生の間、それに対する責任のあるコードを見つけることができません。

4

5 に答える 5

3

このページでは、2つのシステムを使用して「流体液体レイアウト」を実現しています。

Javascript

私たちはmain.js見ることができます：

$(window).bind("smartresize", function( event ) {
    if($("#contactForm")[0]) {enableContact(); if($(window).width() >= 460){doContact();} else {undoContact();}}
    if($("body").hasClass("home")){setTitleHeight();}
});

smartresizeイベントは、jQuery smartresizeプラグインによって提供され、スロットルされたサイズ変更イベントを取得するために使用されます（JSエンジンの過負荷を回避するため）。

この関数は、ウィンドウ幅に応じてUI要素を有効または無効にし、jQueryを多用するカスタム関数を使用してタイトルの高さを調整します。

CSSmediaセレクター

main.cssたとえば、次のように表示されます。

@media only screen and (max-width:1180px) {body{min-width:944px;}}
@media only screen and (max-width:944px) {body{min-width:708px;}}
@media only screen and (max-width:708px) {body{font-size:13px; min-width:472px;}}
@media only screen and (max-width:472px) {body{font-size:11px; line-height:15px; min-width:236px;}}

これらのルールは、要素の幅に応じて異なるプロパティを設定します。

w3.org/TR/css3-mediaqueries/を参照してください

于 2012-11-05T18:45:23.507 に答える
2

CSSにはメディアクエリが満載です： http ：//www.emblematiq.com/global/main.css

于 2012-11-05T18:37:39.820 に答える
2

メインのCSSファイルにはメディアクエリが読み込まれます。

CSSトランジションを使用して、ページがレイアウトの変更に非常にうまく反応するようにします。

于 2012-11-05T18:38:36.413 に答える
1

これは、「レスポンシブWebデザイン」http://en.wikipedia.org/wiki/Responsive_web_designという包括的なフレーズに該当します。記事で説明されているように、それを達成するにはさまざまな方法があります。あなたのサイトは、特に方法の1つにより適応できるかもしれません。

于 2012-11-05T19:15:48.203 に答える
0

そのソースコードによると。私はそれがcssだと思いました。

<link rel="stylesheet" href="/global/main.css" />
于 2012-11-05T18:36:37.210 に答える