ملخص تطوير الصفحات المستجيبة لـ html5/css3

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

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

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

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

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

تجربة التكيف http://m.ctrip.com/html5/ تجربة الاستجابة http://segmentfault.com/

حديقة CSS السرية http://www.csszengarden.com/

http://caibaojian.com/demo/ued/

 <اسم التعريف = محتوى منفذ العرض = العرض = عرض الجهاز، المقياس الأولي = 1.0، المقياس الأقصى = 1.0، قابل للتحجيم بواسطة المستخدم = لا>

تم شرح العديد من معلمات هذا الكود:

§العرض = عرض الجهاز: العرض يساوي عرض الجهاز الحالي

§ المقياس الأولي: القياس الأولي (الإعداد الافتراضي هو 1.0)

§ الحد الأدنى للمقياس: الحد الأدنى للمقياس المسموح للمستخدم بالتكبير (الافتراضي هو 1.0)

§ الحد الأقصى للمقياس: الحد الأقصى للمقياس المسموح للمستخدم بالتكبير (تم ضبطه افتراضيًا على 1.0)

§قابلية التوسع بواسطة المستخدم: ما إذا كان يمكن للمستخدم التكبير يدويًا (الافتراضي هو لا، لأننا لا نريد أن يقوم المستخدمون بتكبير الصفحة وتصغيرها)

2. استعلام الوسائط يعد استعلام وسائط CSS3 عاملاً رئيسياً في تحقيق التصميم سريع الاستجابة. يمكنك استخدام ميزة استعلام الوسائط لجعل الصفحة تستخدم كتل CSS مختلفة بناءً على عرض الجهاز.

تسري قواعد CSS التالية عندما يكون عرض الشاشة أقل من أو يساوي 980:

 @media (orientation:portrait) and (max-width:460px) { .video .innerBox .news a.more {display: none; } .video .innerBox .newsspan {display: none } .video .innerBox .news { العرض: 100% } .video .innerBox .news ul { العرض: 100% محاذاة النص: المركز؛ }}

الاتجاه: صورة | منظر طبيعي

لَوحَة:

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

منظر جمالي:

باستثناء القيمة الرأسية، فهي كلها ذات مناظر طبيعية

حدد Load CSS لتحميل ملف SmallScreen.css إذا كان عرض الشاشة بين 400 بكسل و600 بكسل.

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

3. تخطيط النسبة المئوية

1. عملية تصميم صفحة مستجيبة لـ html5/css3

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

حجم الشاشة: بما في ذلك أحجام شاشات الهاتف المحمول المختلفة (بما في ذلك الأفقية والرأسية)، وأحجام الأجهزة اللوحية المختلفة (بما في ذلك الأفقية والرأسية)، وشاشات الكمبيوتر العادية والشاشات العريضة.

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

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

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

2. الخطوط المستجيبة

المقارنة بين عدة وحدات مختلفة في CSS

بكسل: بكسل. وحدة الطول النسبي، يتم تحديد الحجم حسب دقة الشاشة. (التعاون مع استفسارات وسائل الإعلام)

م: وحدة الطول النسبي. يعادل حجم خط النص داخل الكائن الحالي، أو نسبة إلى حجم الخط الافتراضي للمتصفح إذا لم يتم تعيين حجم الخط الحالي للنص المضمن. قيمة em ليست ثابتة، فهي ترث حجم خط العنصر الأصلي. تتوافق كافة المتصفحات غير المعدلة مع: 1em=16px. ثم 12px=0.75em، 10px=0.625em. لتبسيط تحويل حجم الخط، يجب عليك الإعلان عن Font-size=62.5% في محدد النص في CSS، مما يجعل قيمة em تصبح 16px*62.5%=10px، وبالتالي 12px=1.2em، 10px=1em وهذا يعني أيضًا أنك تحتاج فقط إلى تقسيم قيمة البكسل الأصلية على 10، ثم تغييرها إلى em كوحدة.

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

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

 html{font-size:62.5%;/* 10÷16=62.5% */}body{font-size:12px;font-size:1.2rem;/* 12÷10=1.2 */p{font-size :14px;حجم الخط:1.4rem;}

تجدر الإشارة إلى أنه لكي نكون متوافقين مع المتصفحات التي لا تدعم rem، نحتاج إلى كتابة قيمة px المقابلة أمام rem، بحيث يمكن خفض مستوى المتصفحات التي لا تدعمها بأمان. في الواقع، لا داعي للقلق كثيرًا بشأن استخدام حجم الخط الافتراضي: 100% أو ضبطه على حجم الخط: 62.5%، إذا قمت بتقديم أداة معالجة مسبقة لـ CSS، فيمكنك استخدام القيمة الافتراضية بشكل طبيعي إذا كنت تستخدم حجم الخط: 62.5% لأسباب أخرى فلا حرج في ذلك، يمكنك إعادة تعيينه مرة أخرى إلى حجم الخط الافتراضي الذي تحتاجه في النص.

3. معالجة الصور والفيديو بشكل سريع الاستجابة

http://alistapart.com/d/response-web-design/ex/ex-site-flexible.html#

1. صورة الخلفية ---- استعلام الوسائط

2. تسييل الصورة ---- صورة مرنة

 img، الكائن {الحد الأقصى للعرض: 100%؛}https://www.filamentgroup.com/examples/response-images/

3.HTML5 عنصر <الصورة>

يمكن لعنصر <picture> في HTML5 تعيين صور متعددة.

دعم المتصفح

 <صورة> <المصدر srcset=images/img_smallflower.jpg media=(الحد الأقصى للعرض: 400 بكسل)> <المصدر srcset=images/img_flowers.jpg> <img src=images/img_flowers.jpg style="margin: 0px; padding: 0 بكسل؛ المخطط التفصيلي: لا شيء؛ ارتفاع الخط: 25.2 بكسل؛ حجم الخط: 14 بكسل؛ العرض: 660 بكسل؛ التجاوز: مخفي؛ واضح: كلاهما؛ 
 <script src=http://cdn.gbtags.com/picturefill/2.0.0/picturefill.min.js></script>
 4. استخدم علامات noscript لإنشاء صور سريعة الاستجابة
 Js التحميل الديناميكي للصور الكبيرة والصغيرة 
 <span class=img-placeholder></span><noscript data-mobilesrc=small.jpg data-fullsrc=big.jpg data-alttext=your alt text class=responsivize> <img src=big.jpg></noscript > <script type=text/javascript>var responseImageTag = {replaceInitialImages:function(respons) { var Platform = Desktop var resImage = '.'+respons; var ResponseImages = $(resImage); var i, noOf ResponseImages = responseImages.length; // اختبار عرض جهاز العرض الحالي if(screen.width <= 767){ //767px، أصغر من ipad يعتقد الجميع أنها منصة متنقلة = متنقلة } // تعيين عنصر المصدر الأولي على الصورة for(i = 0; i < noOfresponseImages; i = i + 1 ){ var noScriptElem = $(ResponsiveImages[i]); = mobile){ img.src = noScriptElem.attr(data-mobilesrc) }else{; img.src = noScriptElem.attr(data-fullsrc); } img.className = Response $('.img-placeholder').eq(i).html('').append(img); } }};responsiveImageTag.replaceInitialImages('responsivize');$(window).resize(function(){) responseImageTag.replaceInitialImages('responsivize');});</script>
 4. إطار الاستجابة
 التخصيص: إذا كان موقع الويب الخاص بك يحتوي على عدد كبير من التصميمات المتنوعة، فإذا كنت لا تزال ترغب في استخدام bootstrap، فأنت بحاجة إلى تعديل إطار العمل باعتباره الطبقة السفلية: يجب نسخ عدد كبير من الأنماط، والتسلسل الهرمي لـ CSS مربك ومربك من الصعب الحفاظ عليها.
 في بعض الحالات، يكون bootstrap مفيدًا جدًا. على سبيل المثال، إذا كنت ترغب في إنشاء موقع ويب شخصي جميل نسبيًا وموقع ويب خاص بالمؤسسة وواجهة إدارة الواجهة الخلفية للمدونة وغيرها من المشاريع التي لا تتطلب تخصيصًا عاليًا للصفحة، فغالبًا ما تكون أكثر ملاءمة لمشاريع الواجهة الخلفية أساليب الامتياز وليس من السهل التعمق في التفاصيل. أو قد لا تكون لديك خبرة في إنشاء واجهة أمامية لموقع ويب، مع الأخذ في الاعتبار توافق المتصفح وأحجام الأجهزة التي لا تعد ولا تحصى، سوف يحل لك الكثير من المشاكل.