CSS:ثابتة أو تطفو تخطيط ؟ [مغلقة]

Question

سؤالي يدور حول CSS تخطيط ثابت مقابل تعويم تخطيط يمتد إلى ملء عرض المتصفح.

الآن المسألة أنا على التوالي في أن يكون ترويسة تغيير اعتمادا على عرض الصفحة (شيء أن أفهم ليس من الممكن إعطاء المتصفح الحالي تنفيذ CSS3 هو background-image: size;).عند هذه النقطة, أشعر أنني قد وصلت إلى طريق مسدود في جميع أنحاء:هل يمكنني إعادة صياغة الموقع إلى استخدام CSS الثابتة تخطيط ، أو أن التخطيط الحالي ومحاولة لجعل ترويسة صورة تملأ معظم المساحة المتوفرة ؟ وعلاوة على ذلك, ما هي إيجابيات وسلبيات الانتقال إلى تخطيط عرض ثابت ، وغيرها (الغيب) تداعيات باستخدام تخطيط واحد على الآخر ؟

الموقع في السؤال سوف تعطى كتعليق على هذا السؤال -- أنا لا تريد أن ينظر إليها على أنها محاولة لزيادة حركة المرور إلى ذلك.

تحرير:أي أفكار أخرى ؟

Answer 1

وماذا عن الكشف عن أكثر أو أقل من الصورة كما يتم تغيير حجم المتصفح، بدلا من التوسع في الصورة؟ انها ليست تماما نفس التأثير، لكنه وسيلة سهلة لملء الفضاء كامل مع صورة.

لنفترض، من أجل المثال، أن صورة خلفية ترويسة الخاص بك يحتوي على شعار من نوع ما على رأس، ويقول، صورة لأفق المدينة. وهذا هو، عموما، 1600px اسعة. شعار يجلس إلى يسار الصورة أثناء تمتد سيتي سكيب اليمين المتطرف. ونحن سوف نفترض العلامات الخاصة بك تبدو تقريبا مثل هذا:

<div id="page">
  <div id="masthead">...</div>
  <div id="navigation">...</div>
  ...
</div>

ونحن يمكن أن يحدد العنصر #page إلى مرونة العرض وتطبيق صورة خلفية ل العنصر #masthead:

#page {
  max-width: 1600px;
  min-width: 800px;
  width: 80%;
}

#masthead {
  background: url('path/to/image.jpg') no-repeat left top;
  height: 100px;
  width: auto;
}

وماذا يحدث هنا هو أن العنصر #masthead ستوسع لعرض العنصر #page، والتي سوف تكون في مكان ما بين 800px واسعة 1600px (ضمنا) اعتمادا على مدى واسع في نافذة المتصفح. عندما عنصر #page هو 800px واسعة، ترى فقط اليسار الأكثر 800px على أفق. عندما يكون 1600px واسعة، ترى أفق بأكمله. بهذه الطريقة شعارك مرئيا دائما وعندما يتم تغيير حجم المتصفح، وكشف أكثر من مدينة.

وهذا لا يتطلب وجود صورة بشكل اكبر لتبدأ (على الأقل كما واسع ك ماكس العرض، وإذا ذهبت مرنة)، ولكن النتيجة هي ترويسة التي من شأنها أن تبدو جيدة بغض النظر عن حجم ما هو عليه - دون الاعتماد على، وstrager المذكورة، صورة المتصفحات تغيير حجم الخوارزميات.

Answer 2

ما هو نوع من الصورة هو؟ هو أي جزء منه تكرارها؟ في بعض الأحيان باستخدام طبقتين، واحدة أو شعارا لعنصر التكرار للصورة وآخر للعنصر ثابت.

هل يمكن أن نرى مثالا؟ سيكون من الأسهل للوصول إلى الإجابة الصحيحة لمشكلتك.

Answer 3

إذا كنت تحاول توسيع الخاص بك خلفية الصورة لعرض الصفحة الخاصة بك، فمن الأفضل استخدام تخطيط الحجم الثابت حيث لا يوجد طريقة عبر متصفح لجعل خلفية الصورة توسع في أحجام مختلفة التي هي تعتمد على قرار الزوار.

تقدم

وتخطيطات عرض ثابت المزيد من المرونة للمصمم، ولكن ليس للزائر. إذا قمت بإنشاء التخطيط الذي هو X بكسل، ثم كنت قادرا على صقل موقع الويب الخاص بك بكسل حسب بكسل ترضيك حين تخطيطات "تعويم" (وأدعو لهم تخطيطات السائل) تعتمد كليا على القيم في المئة، وبالتالي تختلف من كمبيوتر إلى كمبيوتر. أجد ذلك صعبا لأنه يمكنك اختبار تخطيط على الشاشة ولا أعرف كيف يظهر على شخص آخر، و(لالسابقين.) هامش 20px ديها اكثر من تأثير على تخطيط ذو عرض ثابت 768px أو 960px من يفعل على شاشة الكمبيوتر 1280px السائل.

والاشتراكات كبير، IMO، ل-عرض ثابت التخطيط هو حقيقة أنها تبدو صغيرة جدا على الشاشات الكبيرة والكبيرة جدا على الشاشات الصغيرة. 768px تستخدم ليكون تخطيط قياسي نسبيا ذو عرض ثابت، ولكن الآن هذا هو صغير جدا لأن العالم يتحرك بعيدا عن 800X600. الآن 960px هو المعيار إلى حد ما، وهو كبير جدا ل800X600 لكن لا تزال صغيرة جدا على 1280X1024.

وكل هذا يتوقف على جمهورك وكيف موقعك يناسب معا. بعض تخطيط يمكن جعل السائل وتعمل بشكل جيد تماما، في حين أن الآخرين يجب أن تكون ثابتة (مثل واحد وصفت لكم).

Answer 4

لماذا لا تستخدم <img> الوسم الخاص بك صورة رأس (الترويسة) بدلا من استخدام خلفية الصورة ؟

أود أن أقترح عدم زيادة رأس الخاص بك الرسم;معظم المتصفحات الرهيب في حجم الصورة (أقرب الجيران ماذا؟) و لن تبدو جيدة لكثير من الناس.

أنا السائل/العوامة/السائل تخطيطات نفسي.أنا الواقع ، معظم المواقع تستخدم عمود واحد, لذا لا داعي للقلق حول كل التعقيدات "طبيعية" تخطيطات الموقع لديك.

Answer 5

ومن المسلم به عموما فكرة سيئة لإنشاء تخطيط حيث الأعمدة النص توسيع إلى المتصفح مع. يصبح النص الصعب قراءة إذا تنمو خطوط لفترة طويلة. أوصي يستقر على ثابت مع لعمود النص، وربما حول 50 حرفا واسعة.