كيفية اختبار التصميم سريع الاستجابة مجانًا. تخطيط سريع الاستجابة باستخدام برنامج JavaScript اختبار التصميم سريع الاستجابة
مرحبا عزيزي قراء المدونة. ليس من المستغرب أن يصبح التصميم التكيفي أكثر شيوعًا على الإنترنت الروسي. وبطبيعة الحال، يحتاج مصممو التخطيط إلى دراستها. نظرًا لأن التصميم سريع الاستجابة سيتوفر قريبًا على جميع مواقع الويب تقريبًا، نظرًا لأن المزيد والمزيد من الأشخاص يستخدمون الأجهزة المحمولة.
وأود أن أقول إن المواقع التي تحتوي عليها أكثر ملاءمة للقراءة على مثل هذه الأجهزة مقارنة بدونها.
اليوم أريد أن أقدم لكم 5 خدمات مفيدة ورائعة للغاية يمكنك من خلالها التحقق من موقع الويب الخاص بك للتأكد من قدرته على التكيف.
وهكذا، دعونا نذهب.
5 خدمات حيث يمكنك التحقق من موقع الويب الخاص بك للتأكد من قدرته على التكيف. www.responsedesigntest.netخدمة جيدة لفحص المواقع. هناك العديد من دقة الشاشة لكل من الأجهزة اللوحية والهواتف.
mattkersley.comخدمة بسيطة لفحص موقع ويب من Matt Kersley. تتوفر أيضًا جميع قرارات الأجهزة المحمولة الشائعة.
خدمة رائعة جدًا ستفحص أي موقع. لقد أعجبني حقًا التصميم، وكذلك الوظيفة.
خدمة جميلة جدا وعملية. ومن الممكن أيضًا التحقق من الشكل الذي سيبدو عليه الموقع على شاشة التلفزيون :-)
من المؤلف: "توقف عن تغيير حجم هذا المتصفح، سيتم محوه قريبًا!" كم مرة تسمع هذا؟ حسنًا، ربما ليس كثيرًا، ولكن إذا قمت بتطوير مواقع ويب سريعة الاستجابة، فأنت تعرف ما أتحدث عنه: في كل مرة تقوم فيها بتحرير DOM أو CSS، فإنك تقوم بسحب حافة المتصفح ذهابًا وإيابًا، واختبار التغييرات والبحث عن عدم الدقة.
وبشكل عام، فإن معظم هذه الجهود هي محاولة لتقليد أحجام شاشات الأجهزة المختلفة.
إذا كنت تقوم بتطوير المشاريع، فمن المحتمل أن يكون لديك الكثير من الأجهزة التي توفرها الشركة لاختبارها. في المكان الذي أعمل فيه، لدينا أجهزة iPad، وiPhone، وجهاز لوحي أو جهازين آخرين، وأجهزة كمبيوتر محمولة، وأجهزة كمبيوتر مكتبية. إذا لم يكن لديك هذا الرفاهية، عليك استخدام ما هو في متناول يدك.
في المنزل لدي جهازي كمبيوتر محمول مختلفين، اثنان مختلفان أجهزة أندرويد: Kindle وNexus 7. أستخدم هذه الأجهزة لاختبار تطوراتي في العمل الحر، لكن من الواضح أن هذا ليس اختيارًا شاملاً. مُطْلَقاً أجهزة iOS، وعلى الرغم من أنني أعتبر من أوائل المستخدمين، إلا أنني لا أخطط لشراء كل هاتف/جهاز لوحي/جهاز لوحي جديد بمجرد طرحه للبيع.
إذن ما الذي يجب على المطور فعله؟ ولحسن الحظ، هناك عدد متزايد من الأدوات المستندة إلى المتصفح والتي تحاكي أحجام الشاشة لمجموعة متنوعة من الأجهزة. الأدوات المختلفة، بالطبع، تأتي مع مجموعات مختلفة من الميزات ومستويات مختلفة من الكفاءة. وسوف ننظر في بعض منهم هنا.
لأغراض الاختبار، استخدمت أول موقع ويب سريع الاستجابة قمت بإنشائه، وهو PajamasOnYourFeet.com. إنه مبني على قالب Brownie HTML5، والذي يتم توفيره بسخاء شديد ومجاني لمجتمع المطورين على EGrappler.
هل أنا مستجيب؟هل أنا مستجيب؟ – معاينة فورية وسهلة تمامًا لموقعك من حيث كيفية ظهوره على أربعة أجهزة مختلفة. جميع الأجهزة الأربعة تعمل بنظام التشغيل iOS، ويشرح المطور اختياره على الموقع الإلكتروني. لا يقدم أي عناصر تحكم أو اختيارات، بل مجرد شاشة عرض بسيطة وأنيقة للغاية. عرض أبعاد النافذة:
سطح المكتب - 1600 × 992 بكسل، متناقصًا حسب المقياس (0.3181)
الكمبيوتر المحمول - 1280 × 802 بكسل، حجم متناقص (0.277)
الكمبيوتر اللوحي - 768 × 1024 بكسل، متناقصًا حسب المقياس (0.219)
الهاتف المحمول - 320 × 480 بكسل، متناقصًا حسب المقياس (0.219)
على حد تعبير المطور: "هذه ليست أداة اختبار، من المهم جدًا القيام بذلك على أجهزة حقيقية. ولكنها أداة لالتقاط لقطات شاشة سريعة (بالنسبة لي) وتوفير فرصة مرئية "للتعمق" في اجتماعات العملاء فيما تقصده.
يشبه موقع Deviceponsive موقع "هل أنا مستجيب"؟ يعرض موقعك ببساطة ودقة، ولكن لا يحتوي على عناصر تحكم أو خيارات متاحة عندما يتعلق الأمر بالأجهزة. يتم عرضها جميعًا في وقت واحد على صفحة واحدة طويلة. لديها خاصية مثيرة للاهتمام - يمكنك تعديل الرأس عن طريق تحرير لون خلفيته وإدراج شعارك الخاص، ثم "طباعته". بهذه الطريقة، إلى حد ما، يمكنك وضع علامة تجارية على موقعك عند عرض لقطات الشاشة للعميل. الأجهزة وأحجام الشاشات المحاكاة على هذا الموقع:
ماك بوك - 1280 × 800
iPad (صورة) - 768 × 1024
iPad (أفقي) - 1024 × 768
كيندل (صورة) - 600 × 1024
كيندل (أفقي) - 1024 × 600
iPhone (اتجاه عمودي) - 320 × 480
آيفون (أفقي) - 480 × 320
المجرة (صورة) - 240 × 320
المجرة (المناظر الطبيعية) - 320 × 240
كما هو الحال مع معظم الأدوات المشابهة، تظهر أشرطة التمرير على الأجهزة الصغيرة. لن تظهر على جهاز حقيقي، ولكن لتتمكن من تمرير عرض الاختبار على جهاز لا يعمل باللمس، عليك تقديم بعض التنازلات.
مثل اختبار Deviceponsive، يعرض اختبار الاستجابة موقعك على أجهزة متعددة، ولكن بدلاً من عرضها كلها مرة واحدة على صفحة واحدة، يمكنك اختيار الجهاز الذي تريد عرضه من قائمة بسيطة في أعلى الصفحة. وبتصفح هذا الموقع على جهاز كمبيوتر محمول متوسط الحجم، وجدت أن تقليص الصفحة يعمل بشكل رائع، مما يتيح لك رؤية الموقع بالكامل داخل نافذة الجهاز قيد الاختبار.
يتم تقديم ثلاثة عشر نافذة عرض مختلفة هنا، من خلال شاشة كبيرة كمبيوتر سطح المكتبإلى ما يسمى بـ "Crappy Android" (لكي نكون صادقين، لديهم أيضًا خيار يسمى " أندرويد أفضل"(أندرويد أجمل).
مرة أخرى، يتعثر Firefox قليلاً على هذا الموقع. لاحظ في لقطة الشاشة - بين الرأس الأخضر ومنطقة المحتوى ذات الخلفية البيضاء - أنه لا يوجد سوى شريط أزرق حيث يجب أن يظهر شريط تمرير الصورة.
إنه مشابه جدًا للجهازين السابقين، والشيء الوحيد الذي يميز الاستجابة عنهما هو الرسوم المتحركة السلسة للعرض من جهاز إلى آخر، بالإضافة إلى التراكب الشفاف الذي يوضح سقوط عقارات الموقع خارج إطار العرض .
خيارات الأجهزة الوحيدة المتاحة هنا هي الخيارات التلقائية، التي تملأ نافذة المتصفح الخاص بك، وتعرض الموقع كما تراه إذا ذهبت إليه: سطح المكتب؛ الكمبيوتر اللوحي (اتجاه أفقي) ؛ الكمبيوتر اللوحي (اتجاه عمودي)؛ الهاتف الذكي (اتجاه أفقي) والهاتف الذكي (اتجاه عمودي)، لم يتم إعطاء أبعاد البكسل.
مرة أخرى، هناك العديد من الميزات والخيارات المختلفة التي تميز Screenqueries عن المواقع الأخرى. يوجد 14 هاتفًا و12 جهازًا لوحيًا مع عنصر منفصل للتبديل بين الوضعين الرأسي والأفقي. يتم عرضها على شبكة بكسل مرقمة، مع إظهار الأبعاد في أسفل يمين شاشة الاختبار. حواف الشاشة قابلة للسحب حتى تتمكن من اختبار الأحجام المخصصة. اسحب أو انقر فوق منطقة الاختبار وستتحول الخلفية إلى اللون الرمادي، مع مظهر أقل فوضى.
ميزة مثيرة للاهتمامهذا الموقع - يوجد خيار "True View" للعديد من الأجهزة، والذي يعرض موقعك ملفوفًا في متصفح Chrome المخصص لهذا الجهاز. لسوء الحظ، وأنا معتاد على ذلك بالفعل، يتعذر على Firefox عرض شريط تمرير الصورة لموقع الاختبار. لا تقلق، فأنا أفضل متصفح Firefox حقًا عندما يتعلق الأمر بالمتصفحات، ولكن لحسن الحظ لدينا خيارات.
Screenfly يزيد بالفعل من عامل سهولة الاستخدام. ويقدم تسعة أجهزة أكبر من الأجهزة اللوحية، بدءًا من الكمبيوتر المحمول مقاس 10 بوصات إلى سطح المكتب مقاس 24 بوصة، وخمسة أجهزة لوحية، وتسعة هواتف ذكية، وثلاثة أحجام لأجهزة التلفاز وخيار مخصص لحجم الشاشة. يمكن تدوير أي خيار تحدده في الاتجاه الرأسي أو الأفقي باستخدام عنصر تحكم منفصل في القائمة. يمكنك اختيار ما إذا كنت تريد السماح بالتمرير أم لا وإنشاء رابط قابل للمشاركة بنقرة زر واحدة.
يعد الموقع مفيدًا بشكل استباقي في الطريقة التي يقدم بها معلومات حجم البكسل. يتم عرض كل جهاز في القائمة مع اسم وأبعاد بكسل، ويظهر حجم نافذة المتصفح الخاصة بك بالقرب من الزاوية اليمنى العليا من النافذة، كما تظهر أبعاد الخيار المحدد في التذييل الموجود أسفل الشاشة جنبًا إلى جنب مع عنوان URL للموقع الذي يتم اختباره. تسهل هذه الميزة الصغيرة توثيق لقطات الشاشة ومشاركة المعلومات مع العملاء.
كل ما سبق كان سيجعلها أداة مثالية بالفعل، لكن مطوري Screenfly وجدوا فرصة لجعلها ببساطة من الدرجة الأولى وقدموا خاصية خادم وكيل. نقلاً عن موقعهم على الويب: "قد تستخدم Screenfly خادمًا وكيلاً لانتحال صفة الأجهزة أثناء عرض موقع الويب الخاص بهم. يحاكي الوكيل سلسلة وكيل المستخدم للأجهزة التي تحددها، ولكن ليس سلوك تلك الأجهزة." جميع الأدوات الأخرى الموضحة هنا تتعامل حصريًا مع CSS. Screenfly هو الوحيد الذي يسمح بالاختبار بناءً على سلسلة وكيل المستخدم.
بعد أن اختبرت بهذه الطريقة موقعًا واحدًا قمت بإنشائه باستخدام الموقع الحالي اصدار المحمولأستطيع أن أقول أن النتائج كانت جيدة جدًا. تم عرض كل شيء تمامًا كما توقعت وكانت الميزات قابلة للاختبار. يجب أن أقول إن اختبار سلاسل وكيل المستخدم أصبح تقليديًا، ولكن هذا الموقع تم إنشاؤه منذ وقت طويل، وتبين أن خاصية الوكيل كانت إضافة مفيدة للغاية إليه بالفعل.
لذلك، يمكنك أن ترى أن هناك الكثير من الموارد المتاحة لاختبار مواقع الويب سريعة الاستجابة. أنها تختلف في خصائص فريدة من نوعها. ستعتمد المواقع التي تستخدمها على تفضيلاتك ومتطلباتك الشخصية، وأحاول أن أشجعك على استكشافها وتجربتها. كلما زاد عدد المطورين لدينا حقًا أدوات مفيدةكل ما هو أفضل.
يحتاج المتجر عبر الإنترنت إلى تحسينه ليناسب الأجهزة المحمولة. تم حل هذه المشكلة باستخدام التصميم التكيفي، الذي يسمح بعرض الموقع بشكل صحيح على أي منصة. ومع ذلك، فإن تنفيذ التصميم سريع الاستجابة يأتي مع مجموعة قياسية من المخاطر. دعونا ندرج المشاكل الثمانية الأكثر شيوعًا في مواقع التسوق عبر الإنترنت.
إهمال تحليلات سلوك الزائرإن الاندفاع لدخول قطاع الهاتف المحمول يجبر تجار التجزئة على تصميم موقع ويب دون إجراء تحليلات جادة لسلوك الزائر. يعد تحليل سلوك الزائر أهم مرحلة في الإعداد، حيث يسمح لك بتحديد أجهزة الجوال الأكثر شيوعًا وتحسين الموقع لها أولاً. تساعد التحليلات في تحديد الإجراء الأكثر "شعبية" للمستخدم، على سبيل المثال، توسيع صورة المنتج؛ يعرض معدل التحويل لزوار الهاتف المحمول، وما إلى ذلك. ستوفر هذه البيانات نظرة ثاقبة لتفضيلات سلوك المستخدم وتساعد في تلبية توقعات جمهور الهاتف المحمول. تحليل حركة المرور المتنقلةمن الضروري تنفيذ النتائج بشكل منهجي ومتسق، ووضع اللمسات النهائية على الموقع وتحسينه لتلبية احتياجات العملاء.
تصميم متجر سطح المكتبعادة، يتم إعادة تصميم إصدار سطح المكتب من المتجر عبر الإنترنت لشاشات الهاتف المحمول، على الرغم من أنه من المنطقي أكثر أخذ الشاشة الصغيرة لجهاز محمول ثم توسيع نطاقها إلى سطح المكتب. غالبًا ما لا يدرك تجار التجزئة المشكلات الفنية المتمثلة في جلب موقع ويب مصمم لسطح المكتب إلى حجم الهاتف الذكي. 
البدء بالتصميم ل شاشات المحمول، فأنت تركز على تجربة مستخدم الهاتف المحمول. ونتيجة لذلك، سيكون من الأسهل عليك التصميم لكلتا القناتين: سطح المكتب والجوال.
يعد اختبار تخطيط الهاتف المحمول لمتجر عبر الإنترنت مرحلة إلزامية للإطلاق، لكن العديد من المالكين غالبًا ما يهملونه ويبدأون دون اختبار. ونتيجة لذلك، قد تظهر أخطاء في النسخة المباشرة من الموقع للأجهزة المحمولة حتى أثناء عملية الشراء وتقديم الطلب.
يتم تحديد عيوب التصميم التكيفي بسهولة من خلال الاختبار الأولي لمتجر عبر الإنترنت، ولكن العديد من البائعين ليس لديهم الموارد اللازمة لذلك. لتقليل مخاطر خسارة الأموال، اختبر مسارات المستخدم الرئيسية حول الموقع في المتصفحات الرئيسية - Chrome وIE وFirefox وSafari و أنظمة التشغيل- أنظمة التشغيل Windows وMac OS وAndroid وIOS شائعة أجهزة محمولة. اختبر في كل مرة تقوم فيها بإجراء تغييرات؛ يمكن أن تساعد خدمات مثل BrowserStack أو Viewport Resizer في تقليل وقت الاختبار إلى عدة ساعات.
عناصر صغيرة لشاشات الجوالفي محاولة لتوفير مساحة أكبر على شاشة الهاتف الذكي، يبخل أصحاب المتاجر عبر الإنترنت في حجم أزرار "الحث على اتخاذ إجراء" الخاصة بهم. لا تجبر المستخدمين على التكبير/التصغير للنقر على زر الشراء ولا تضع عناصر صغيرة قريبة جدًا من بعضها البعض، وإلا فسيختار المستخدمون الانتقال إلى موقع أكثر ملاءمة. واجهات التصميم مع عناصر التنقل الكبيرة وأحجام أزرار الحث على اتخاذ إجراء.
بطء سرعة تحميل الصفحةيحب جمهور الهاتف المحمول المواقع السريعة وأوقات التحميل المنخفضة. تقييم مكونات الخاص بك صفحات الجوال- الصور والأزرار والنصوص والبرامج النصية - يجب تحسينها للأجهزة المحمولة. يأخذ Google وقت تحميل الصفحة في الاعتبار في نتائج SERP الخاصة به ويصنف مواقع الجوال ويمنحها الأفضلية في الأعلى، بحيث تحصل المواقع "الخفيفة" على ميزة جدية إضافية.
قم بفصل المحتوى إلى علامات تبويب مختلفة، على سبيل المثال، قد تحتوي صفحة المنتج على صورة أساسية ووصف وسعر وزر "شراء" فقط. يمكن وضع تعليقات العملاء ومقاطع الفيديو في علامة تبويب منفصلة وتقليل "وزن" الجزء الرئيسي من الصفحة. بالإضافة إلى المحتوى، قم بتحسين العناصر الأخرى التي تؤثر على سرعة التحميل - ملفات CSS والصور والبرامج النصية، ترسل البيانات الضرورية فقط. ستساعدك الأدوات التي تقلل حجم ملفات الموارد ووقت تحميلها في هذا: Uglify أو JSCompress.
تقليم المحتوى لمستخدمي الهاتف المحمولفي كثير من الأحيان، يقوم المطورون بإخفاء بعض المحتوى بحيث يكون التحميل على الأجهزة المحمولة أسرع. ومع ذلك، في كثير من الأحيان لا يتم تقليل حجم الصفحة فعليًا ولا يتم عرض المحتوى للمستخدم ببساطة. يجب أن يكون متجرك قادرًا على إنشاء صفحة ديناميكيًا، مما يقلل من وزن الصفحة وأوقات التحميل لزوار الهاتف المحمول. بالإضافة إلى ذلك، فإن منح مستخدمي الهاتف المحمول محتوى أقل يعد أمرًا سيئًا ويؤثر سلبًا على تجربة المستهلك. عادة، أثناء عملية الشراء التي يستخدمونها أجهزة مختلفة، حوالي 90% من المتسوقين عبر الإنترنت يقومون بذلك. يعد قصرها على أساليب التصميم سريعة الاستجابة خطأً كبيرًا.
يدعم الصور بدقة واحدة فقطيقوم موقع الويب الجيد ذو التصميم سريع الاستجابة بتغيير دقة الصور تلقائيًا اعتمادًا على نوع الجهاز؛ الصور الثقيلة تزيد من وقت التحميل. هناك عدة طرق لضبط أحجام الصور تلقائيًا لتناسبها جهاز معين. الصور "المرنة" (الصور المرنة) هي طريقة تعتمد على CSS وتسمح لك بضغط صورة وتمديدها اعتمادًا على عرض العنصر الذي يحتوي عليها، أو عنصر HTML5 الذي يسمح لك بتحميل صورة بالحجم المطلوب لكل منها. نوع الجهاز.
رسائل البريد الإلكتروني "غير المستجيبة".يحدث أن كل شيء على ما يرام مع الموقع نفسه، والتصميم سريع الاستجابة يعمل بشكل جيد على أجهزة الكمبيوتر المكتبية والأجهزة المحمولة. لكن رسائل البريد الإلكتروني لا تستجيب، ويواجه مستخدمو الهاتف المحمول صعوبة في التحقق من تفاصيل الطلب أو التمرير خلال قائمة لا نهاية لها من المنتجات الموصى بها للوصول إلى مشترياتهم المكتملة. 
تعد رسائل البريد الإلكتروني نقطة اتصال رئيسية مع العملاء، لذا قم بدمج تصميم البريد الإلكتروني سريع الاستجابة في إستراتيجية هاتفك المحمول. قم بتصميم واختبار رسائلك ورسائلك الإخبارية؛ يجب أن تكون قوالب الرسائل "خفيفة الوزن" وتحتوي على معلومات مهمة فقط.
مع تطور تقنيات الويب، تزداد متطلبات تطوير الويب أيضًا. مطورو الويب، أو مصممو التخطيط، أو كما يطلق عليهم اليوم مطورو الواجهة الأمامية، يشعرون بأكبر قدر من الضغط.
في هذه المقالة، سنتحدث قليلا عن التخطيط التكيفي، لأن هذه "الحيلة" أصبحت الآن مكلفة للغاية. عندما يتعلق الأمر بالتخطيط التكيفي، فإن مصممي التخطيط من أي مستوى ينظرون إلى العملاء أو مديري المشاريع، بعبارة ملطفة، بغضب، لأنهم يفهمون مدى صعوبة الأمر.
يبدأ الكثير من الناس في الخلط بين التخطيط التكيفي والتخطيط المرن، وهذا خطأ شائع جدًا بين مصممي التخطيط المبتدئين. ما الفرق الذي تسأله؟
دعونا أولاً، لكي يكون الأمر واضحًا لك، وإذا جاز التعبير، ضع كل النقاط وانظر إلى أنواع التخطيط الموجودة.
هناك 4 أنواع من التخطيط:
دعونا نفكر في جميع الأنواع بمزيد من التفصيل.
1. تخطيط ثابت
الكتل لا تغير عرضها. على الشاشات ذات الدقة المنخفضة، يظهر شريط تمرير أفقي.
#temnyi، #svetlyi ( العرض: 440 بكسل؛ )
2. تخطيط المطاط
تغير الكتل عرضها حسب حجم نافذة المتصفح. يمكن أن يستغرق الحد الأقصى والحد الأدنى للقيم (خاصية العرض الأقصى). لكن لا يمكنك تحقيق نسبة 50% من 50% إلى 100% مع صغر حجم الشاشة.
#temnyi، #svetlyi ( العرض: 50%؛ )
3. التخطيط التكيفي
تم التنفيذ باستخدام @media أو البرامج النصية. مخصصة لأجهزة محددة معروفة (320، 768، 1024، وما إلى ذلك). أي تغيير يحدث في الهزات، بعد الوصول إلى أحد المستويات المحددة. بالتأكيد مناسبة ل
#temnyi، #svetlyi ( العرض: 430 بكسل؛ ) @media (الحد الأقصى للعرض: 1220 بكسل) ( #temnyi، #svetlyi ( العرض: 380 بكسل؛ ) ) @media (الحد الأقصى للعرض: 1120 بكسل) ( #temnyi، #svetlyi ( العرض : 325 بكسل; ) ) @media (أقصى عرض: 680 بكسل) ( #temnyi, #svetlyi ( العرض: 200 بكسل; ) )
4. تخطيط سريع الاستجابة
هذا مزيج من التخطيط السلس والتكيفي. الأصعب في التنفيذ. لكن النتيجة هي الأكثر قبولا. من الآمن أن نقول أن الموقع سوف يتكيف مع أي جهاز.
#temnyi، #svetlyi ( العرض: 50%؛ ) @media (الحد الأقصى للعرض: 1006 بكسل) ( #temnyi، #svetlyi ( العرض: 100%؛ ) )
لذلك تحدثنا عن 4 أنواع من تخطيطات مواقع الويب. لقد حان الوقت الآن لنص التخطيط التكيفي المعجزة. آمل ألا يتم شرح أي شيء؛ النص بسيط للغاية؛ نقول ببساطة أنه عند حدوث تغيير، سيتم خلط بعض الكتل في مكان ما وهذا كل شيء. بالطبع، هذا ممكن أيضًا من خلال أنماط CSS، لكن عليك معرفة جميع الطرق؛ في بعض الأحيان لن يعمل بعضها في بعض الأماكن وسيكون بعضها الآخر صحيحًا.
البرنامج النصي للتخطيط التكيفي:
/* لنقم بإنشاء متغير يمكنك وضع فئات monogest فيه، لسهولة استخدامها في التعليمات البرمجية. أي هنا يكتشفها مرة واحدة وهذا كل شيء، وليس قبل كل عينة! هذه ميزة مفيدة */ var my = ( window: $(window) ); /*في الواقع الوظيفة نفسها*/ $(window).resize(function () ( /*متغير يحدد عرض النافذة ويضعها في متغير العرض*/ var width = my.window.width( ); /*شرط تحويل النافذة، أي الشرط الذي يتم تنفيذه عندما يصل عرض النافذة إلى حجم معين*/ if(my.window.width()< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });
هذا كل شئ. إذا كان لديك أي أسئلة، اكتب في التعليقات، انتقل إلى
