تصميم الويب سريع الاستجابة html: يتكيف تلقائيًا مع عرض الشاشة

خلفية

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

شاشة الهاتف المحمول صغيرة نسبيًا ، وعادة ما يكون عرضها أقل من 600 بكسل ؛ عرض شاشة الكمبيوتر بشكل عام أعلى من 1000 بكسل (العرض السائد حاليًا هو 1366 × 768) ، وقد وصل بعضها إلى 2000 بكسل. ليس من السهل على نفس المحتوى عرض نتائج مرضية على شاشات ذات أحجام مختلفة.

الحل للعديد من مواقع الويب هو توفير صفحات ويب مختلفة لأجهزة مختلفة ، مثل إصدار الهاتف المحمول أو إصدار iPhone / iPad. هذا بالتأكيد يضمن التأثير ، لكنه أكثر إزعاجًا. وفي نفس الوقت ، يجب الحفاظ على العديد من الإصدارات ، وإذا كان موقع الويب يحتوي على بوابات متعددة ، فسيؤدي ذلك إلى زيادة تعقيد التصميم المعماري بشكل كبير.

نتيجة لذلك ، فكر بعض الأشخاص في وقت مبكر ، هل يمكن "التصميم مرة واحدة ، والتطبيق عالميًا" بحيث يمكن لصفحة الويب نفسها أن تتكيف تلقائيًا مع الشاشات ذات الأحجام المختلفة وتعديل التنسيق تلقائيًا وفقًا لعرض الشاشة؟

1. مفهوم "تصميم الويب سريع الاستجابة"

في عام 2010 ، اقترح إيثان ماركوت مصطلح "تصميم الويب سريع الاستجابة" ، والذي يشير إلى تصميم الويب الذي يمكنه التعرف تلقائيًا على عرض الشاشة وضبطه وفقًا لذلك.

2. السماح بتعديل عرض صفحة الويب تلقائيًا باستخدام العلامة الوصفية: منفذ العرض

يعد تكييف الصفحة المحمولة H5 طريقة شائعة الاستخدام ، ومن الناحية النظرية ، يمكن أن يتكيف استخدام هذه العلامة مع جميع أحجام الشاشات ، ومع ذلك ، فإن طرق التفسير المختلفة ومستويات دعم العلامة على الأجهزة المختلفة تجعلها غير متوافقة مع جميع المتصفحات أو الأنظمة.
إن منفذ العرض هو المنطقة المرئية لصفحة الويب الخاصة بالمستخدم. يمكن أن يسمى ترجمتها إلى الصينية "منطقة العرض".
يضع متصفح الجوال الصفحة في "نافذة" افتراضية (منفذ العرض) ، وعادة ما يكون "إطار العرض" الافتراضي أعرض من الشاشة ، لذلك لا تحتاج إلى وضع كل صفحة الضغط في نافذة صغيرة (سيؤدي ذلك إلى تدمير تخطيط صفحات الويب غير المحسّنة لمتصفحات الجوال) ، ويمكن للمستخدمين التحريك والتكبير لرؤية أجزاء مختلفة من صفحة الويب.
إن منفذ العرض هو العرض والارتفاع الافتراضيان لصفحة الويب. يعني سطر التعليمات البرمجية أعلاه أن عرض صفحة الويب يساوي عرض الشاشة افتراضيًا (العرض = عرض الجهاز) ، ونسبة التكبير / التصغير الأصلية (مقياس أولي = 1 ) هو 1.0 ، أي أن الحجم الأولي لصفحة الويب يشغل 100٪ من مساحة الشاشة.

اسم السمة	القيمة	وصف
width	عدد صحيح موجب أو عرض الجهاز	حدد عرض إطار العرض بالبكسل
height	عدد صحيح موجب أو ارتفاع الجهاز	حدد ارتفاع منفذ العرض ، الوحدة بالبكسل ، غير مستخدمة بشكل عام
initial-scale	[0.0-10.0]	حدد قيمة التكبير الأولي
minimum-scale	[0.0-10.0]	حدد الحد الأدنى لنسبة التخفيض ، والذي يجب أن يكون أقل من أو يساوي الحد الأقصى لإعداد المقياس
maximum-scale	[0.0-10.0]	حدد الحد الأقصى لمقياس التكبير ، ويجب أن يكون أكبر من أو يساوي الحد الأدنى من إعداد المقياس
user-scalable	yes/no	حدد ما إذا كنت تريد السماح للمستخدم بتكبير الصفحة يدويًا ، فالقيمة الافتراضية هي نعم

أولاً ، أضف سطرًا من علامة meta لإطار العرض إلى رأس كود الصفحة.

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

أو

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

تدعم جميع المتصفحات الرئيسية إعداد منفذ العرض هذا ، بما في ذلك IE9. بالنسبة لتلك المتصفحات القديمة (بشكل أساسي IE6 ، 7 ، 8) ، تحتاج إلى استخدام css3-mediaqueries.js.

<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>

ثلاثة ، قم بتعيين العرض النسبي

نظرًا لأن صفحة الويب ستضبط التنسيق وفقًا لعرض الشاشة ، فلا يمكنك استخدام تخطيط عرض مطلق ، ولا يمكنك استخدام عنصر بعرض مطلق. هذا مهم جدا

على وجه التحديد ، لا يمكن لرمز CSS تحديد عرض البكسل: العرض: xxx بكسل ؛ فقط النسبة المئوية للعرض: العرض: xx٪ ؛ أو العرض: تلقائي ؛

الامتداد: يوصى باستخدام وحدة css3 rem

Rem هي وحدة نسبية جديدة (root em) في CSS3. عند استخدام rem لتعيين حجم خط عنصر ما ، يكون حجمًا نسبيًا ، ولكن الحجم النسبي هو فقط عنصر جذر HTML. من خلاله ، يمكن ضبط جميع أحجام الخطوط بشكل متناسب فقط عن طريق تعديل عنصر الجذر ، ويمكن أيضًا تجنب التفاعل المتسلسل لحجم الخط طبقة تلو الأخرى.

في الوقت الحالي ، تدعم جميع المتصفحات rem باستثناء IE8 والإصدارات السابقة. بالنسبة للمتصفحات التي لا تدعمها ، اكتب بيان وحدة مطلق. تتجاهل هذه المتصفحات حجم الخط المعين بـ rem. هنا مثال:

p {font-size:14px; font-size:.875rem;}

حجم خط html الافتراضي هو 16 بكسل ، أي 1rem = 16 بكسل. إذا كان عرض div هو 32 بكسل ، فيمكنك تعيينه على 2rem.

عادةً ، يتم استخدام 62.5٪ لتسهيل حساب القيمة ، وهي القيمة الافتراضية 10 بكسل كأساس. بالطبع ، يمكن أن تكون هذه القاعدة أي قيمة ، اعتمادًا على الموقف المحدد. طريقة الإعداد هي كما يلي:

Html{font-size:62.5%(10/16*100%)}

تعريفات القواعد المحددة تحت الشاشات المختلفة ، أي تعريف الرقم الأساسي: يمكن تعريفه بواسطة CSS ، ويمكن تحديد القيم الأساسية المختلفة في نطاقات عرض مختلفة.بالطبع ، يمكن أيضًا تعريفها مرة واحدة بواسطة js على النحو التالي:

<script type="text/javascript">
   (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';// من بينها ، "20" إجراء التغييرات المناسبة وفقًا لقيمة سمة حجم الخط في html التي قمت بتعيينها
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

رابعًا ، قم بتعيين حجم الخط النسبي

لا يمكن للخط أيضًا استخدام الحجم المطلق (px) ، ولكن الحجم النسبي فقط (em).
body {font: normal 100% Helvetica, Arial, sans-serif;}

يحدد الكود أعلاه أن حجم الخط هو 100٪ من حجم الصفحة الافتراضي ، وهو 16 بكسل.
h1 {font-size: 1.5em;}

بعد ذلك ، يكون حجم h1 1.5 ضعف الحجم الافتراضي ، وهو 24 بكسل (24/16 = 1.5).
small {font-size: 0.875em;}

حجم العنصر الصغير هو 0.875 ضعف الحجم الافتراضي ، وهو 14 بكسل
（14/16=0.875）。

خمسة ، نسبة استخدام الشبكة المرنة ، التخطيط العائم

معنى "تخطيط التدفق" هو ​​أن موضع كل كتلة يتحرك وليس ثابتًا.

.main {float: right;width: 70%;}

.leftBar {float: left;width: 25%;}

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

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

6. استخدم الاستعلامات الإعلامية

جوهر "تصميم الويب التكيفي" هو وحدة استعلام الوسائط التي قدمها CSS3 ، والتي تكتشف تلقائيًا عرض الشاشة ثم تقوم بتحميل ملف CSS المقابل.
الاستعلام عن الوسائط هو أيضًا طريقة css3. المشكلة التي نريد حلها هي التكيف مع شاشة الهاتف المحمول. لقد وُلد هذا الاستعلام عن الوسائط لحل هذه المشكلة.
تتمثل وظيفة الاستعلام عن الوسائط في تعيين أنماط css مختلفة لوسائط مختلفة. تتضمن "الوسائط" هنا حجم الصفحة وحجم شاشة الجهاز وما إلى ذلك.

1. قم بتحميل CSS في ملف html

إذا كان عرض الشاشة أقل من 400 بكسل (max-device-width: 400px) ، فقم بتحميل ملف tinyScreen.css.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />

إذا كان عرض الشاشة يتراوح بين 400 بكسل و 600 بكسل ، فقم بتحميل ملف smallScreen.css.

<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

2. تحميل الاستيراد في ملف CSS

في نفس ملف CSS ، يمكنك أيضًا اختيار استيراد ملفات CSS مختلفة وفقًا لدرجات دقة الشاشة المختلفة.

@import url("tinyScreen.css") screen and (max-device-width: 400px);

3. استخدم قواعدmedia لملفات CSS

في نفس ملف CSS ، يمكنك أيضًا اختيار تطبيق قواعد CSS مختلفة وفقًا لدرجات دقة الشاشة المختلفة.

@media screen and (max-device-width: 400px) {
	.column {
	float: none;
	width:auto;
	}
	
	#sidebar {
	display:none;
	}
}

يعني الرمز أعلاه أنه إذا كان عرض الشاشة أقل من 400 بكسل ، فإن كتلة العمود ستلغي التعويم (عائم: لا شيء) ، وسيتم تعديل العرض تلقائيًا (العرض: تلقائي) ، ولن يتم عرض كتلة الشريط الجانبي (العرض: لا شيء).

سبعة ، تكيف الصورة (صورة سائلة)

1. التكبير التلقائي للصور.

هذا يتطلب سطرًا واحدًا فقط من كود CSS:

img { max-width: 100%;}

هذا السطر من التعليمات البرمجية صالح أيضًا لمعظم مقاطع الفيديو المضمنة في صفحات الويب ، لذلك يمكن كتابتها على النحو التالي:

img, object { max-width: 100%;}

الإصدار القديم من IE لا يدعم max-width ، لذلك كان علي أن أكتب:

img { width: 100%; }

بالإضافة إلى ذلك ، قد يحدث تشوه في الصورة عند تكبير الصور على منصة windows. في هذا الوقت ، يمكنك محاولة استخدام أوامر الملكية الخاصة بـ IE:

img { -ms-interpolation-mode: bicubic; }

أو ، imgSizer.js لإيثان ماركوت.

addLoadEvent(function() {

var imgs = document.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

});

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

2. صور تستجيب لـ CSS - تحميل صور بدقة مختلفة

قد لا يكون الأمر غير مألوف للعديد من مطوري IOS. من أجل التكيف مع شاشة Retina ، فإن طريقة تنفيذ CSS3 التقليدية هي تحميل صورة يتم تكبير عرضها وارتفاعها مرتين ، ثم تقليل حجم صورة الخلفية بمقدار واحد من خلال استعلامات الوسائط. مزدوج "حجم الخلفية: 50٪ 50٪ ؛" ،
اضبط عنوان url لتحميل الصورة أسفل شاشات مختلفة ، على سبيل المثال:

.mod .hd h3 { background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png );/ * شاشة عادية * /
/* ------------ Retina ------------ */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */ 
 only screen and (min--moz-device-pixel-ratio: 2), / * قبل إصدار Firefox 16 * / 
 only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */ 
 only screen and (min-resolution: 240dpi), /* اساسي */ 
 only screen and (min-resolution: 2dppx) /* اساسي */ 
 { 
.mod .hd h3{ 
background-image:url(http://img02.taobaocdn.com/tps/i2/T1t9wzXlxXXXczY8cm-212-310.png); 
background-size: 106px 155px; 
} 
}

مهارات تطوير صفحات الجوال:

1. تحقق من استخدام المستخدم أولاً ولخص الجهاز الذي يستخدمه معظم المستخدمين للوصول إلى موقع الويب.

2. قم بسردها جميعًا ، ثم اكتب استعلامات إعلامية

على سبيل المثال: ربما تكون مجموعة المستخدمين الخاصة بي هي هذه الأجهزة الثلاثة

اسم الجهاز	الدقة	تقدير حجم الخط	rem و px التحويل
iphone5	320*568	font-size：12px；	1rem=12px
iphone6	375*667	font-size：14px；	1rem=14px
iphone6Plus	414*736	font-size：16px；	1rem=16px

أولاً ، خذ الجهاز الأوسط للقيام بالكتابة الأساسية

إعطاء الأولوية لتسمية الاستعلام عن الوسائط على الصفحة

    <meta name="viewport" content="width=device-width,      initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,    user-scalable=no">

عرض جهاز منفذ العرض
ارتفاع جهاز منفذ العرض
مقياس أولي - مقياس أولي
الحد الأدنى للمقياس - الحد الأدنى للمقياس الذي يُسمح للمستخدم بتكبيره
المقياس الأقصى - الحد الأقصى الذي يُسمح للمستخدم بالتكبير / التصغير إليه
قابلية المستخدم للتكبير - ما إذا كان يمكن للمستخدم التكبير يدويًا

تم تعيينه أعلاه ، اكتب استعلامًا عن الوسائط بهذه الطريقة

html,body{ height: 100%; margin: 0; padding: 0; font-size: 14px;}// لاحظ أنه يجب كتابة النمط الأولي في الأعلى! ! ! ! إذا تمت كتابته في الجزء السفلي من استعلام الوسائط ، فسيغطي استعلام الوسائط أعلاه (لأنه ورقة أنماط متتالية ~)
@media screen and (max-width:320px ) {
    html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
    html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
    html{font-size: 16px;}
}

تحويل بيكسل في الصفحة إلى قيمة rem المقابلة

مثال:

header{
    width:140px;// تحويل إلى 10rem ، لأننا نعتمد على الجهاز الأوسط ، حجم الخط للجهاز الأوسط: 14 بكسل ، لذا 140 بكسل = 10 ريم.
}

يتم تغيير كل ارتفاع وعرض px إلى rem ويتم ذلك ، مع التكيف مع الأجهزة الثلاثة