تقدم هذه المقالة كيفية تنفيذ تصميم الويب المستجيب (المتكيف) بتنسيق HTML5 ومشاركته مع الجميع، على النحو التالي:
الخطوة 1: أضف سطرًا من العلامات الوصفية لإطار العرض إلى رأس رمز صفحة الويب
< اسم التعريف = محتوى منفذ العرض = العرض = عرض الجهاز، المقياس الأولي = 1 />
إطار العرض هو العرض والارتفاع الافتراضي لصفحة الويب، ويعني سطر التعليمات البرمجية أعلاه: عرض صفحة الويب يساوي عرض الشاشة افتراضيًا (العرض = عرض الجهاز)، ونسبة القياس الأصلية (المقياس الأولي). =1) هو 1.0، أي أن الحجم الأولي لصفحة الويب يشغل الشاشة بنسبة 100% من المساحة.
تدعم كافة المتصفحات الرئيسية هذا الإعداد، بما في ذلك 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]-- >
الخطوة 2: (ملاحظة) لا تستخدم العرض المطلق وحجم الخط
العرض: تلقائي / العرض: XX%؛
الخطوة الثالثة: (ملاحظة) حجم الخط
حجم الخط هو 100% من الحجم الافتراضي للصفحة، وهو 16 بكسل
لا تستخدم الحجم المطلق PX للخطوط، استخدم الحجم النسبي REM
أتش تي أم أل {حجم الخط:62.5٪؛} الجسم {الخط: عادي 100% Arial,sans-serif;حجم الخط:14px;الخطوة 4: تخطيط التدفق
معنى التخطيط المرن هو أن موضع كل كتلة عائم وليس ثابتًا.
.left{ width:30%; float:left} .right{ width:70%;الميزة هي أنه إذا كان العرض صغيرًا جدًا بحيث لا يتسع لعنصرين، فسيتم تمرير العنصر التالي تلقائيًا إلى أسفل العنصر السابق دون أن يفيض في الاتجاه الأفقي، وبالتالي تجنب ظهور أشرطة التمرير الأفقية.
الخطوة 5: اختر تحميل CSS
جوهر تصميم الويب التكيفي هو وحدة استعلام الوسائط التي قدمتها CSS3. اكتشف عرض الشاشة تلقائيًا ثم قم بتحميل ملف CSS المقابل
<link rel=stylesheet type=text/css media=screen and (max-device-width: 600px) href=style/css/css600.css />
الكود أعلاه يعني أنه إذا كان عرض الشاشة أقل من 600 بكسل (الحد الأقصى لعرض الجهاز: 600 بكسل)، فقم بتحميل ملف css600.css.
إذا كان عرض الشاشة بين 600 بكسل و 980 بكسل، قم بتحميل ملف css600-980.css
<link rel=stylesheet type=text/css media=screen and (min-width: 600px) and (max-device-width: 980px) href=css600-980.css />
أيضًا (غير مستحسن): بالإضافة إلى تحميل ملفات CSS بعلامات html، يمكنك أيضًا تحميلها في ملفات CSS الموجودة
@import url(css600.css) الشاشة و(الحد الأقصى لعرض الجهاز: 600px)؛
الخطوة 6: قواعد CSS @media
شاشة الوسائط و (أقصى عرض للجهاز: 400 بكسل) { .left{ float:none;} }عندما تكون الشاشة أصغر من 400، يلغي اليسار التعويم
الخطوة 7: تعديل الصور
يجب أن يقوم تصميم الويب سريع الاستجابة أيضًا بتنفيذ القياس التلقائي للصور.
img، الكائن {الحد الأقصى للعرض: 100%؛}الإصدارات الأقدم من IE لا تدعم الحد الأقصى للعرض، لذا يجب أن أكتب:
إمج {العرض: 100%؛}عند تغيير حجم الصور على نظام التشغيل Windows، قد يحدث تشويه للصورة. في هذا الوقت، يمكنك محاولة استخدام الأمر الخاص بـ IE
img { width:100% -ms-interpolation-mode: bicubic;}أو استخدم js--imgSizer.js
addLoadEvent(function() { var imgs = document.getElementById(content).getElementsByTagName(img); imgSizer.collate(imgs); });ملاحظة: إذا كان ذلك ممكنًا، فمن الأفضل تحميل صور ذات دقة مختلفة وفقًا لأحجام الشاشات المختلفة.
عملية بسيطة:
<style type=text/css> img{ max-width:100%;} video{ max-width:100%; النوع: لا شيء؛ الهامش الأيمن: 10 بكسل؛} تحديد الرأس {عرض: لا شيء؛} @media (max-width: 960px) { header ul {display:none;} header حدد{ Display:inline-block;} } </style> <body> <header> <ul> <li><a href=# class=active>الصفحة الرئيسية</a></li> <li><a href =#>AAA</a></li> <li><a href=#>BBB</a></li> <li><a href=#>CCC</a></li> <li ><a href=#>DDD</a></li> </ul> <select> <option class=selected><a href=#>الصفحة الرئيسية</a></option> <option value=/AAA>AAA</option> <option value=/BBB>BBB</ الخيار> <option value=/CCC>CCC</option> <option value=/DDD>DDD</option> </select> </header> </body>ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.