ملاحظة إضافية
يمكنك جعل موقعك يبدو أكثر جمالًا عند استخدام أجهزة الجوال، والأجهزة اللوحية وذلك باستخدام وسم meta viewport.
تعلم التصميم باستخدام CSS
"التصميم المرن، أو المطاط" هو استراتيجية لجعل الموقع "يستجيب" للمتصفح، والجهاز الذي يتم عرض الموقع منه. وذلك من خلال جعل الموقع يظهر بشكل رائع، مهما كان المتصفح، أو الجهاز الذي تقوم بالاستعراض منه.
استعلامات media هي أقوى أداة لتحقيق هذا الأمر. لنأخذ المثال الذي قمنا بتصميم صفحة باستخدام العرض المئوي، ولنضعها في عمود واحد، ثم نشاهد كيف ستبدو عندما يكون المتصفح صغيرًا جدًا.
@media (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media (max-width:599px) {
nav li {
display: inline;
}
}الآن عندما تقوم بتكبير أو تصغير المتصفح، سيصبح شكل الصفحة رائعًا أكثر!.
</section>لوريم إيبسوم هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" البلاستيكية التي تحتوي على مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.
</section>أوه! الأن تبدو الصفحة رائعة عند التصفح من الجوال. هنا ستجد بعض المواقع الشهيرة التي تستخدم استعلامات media بهذه الطريقة. هناك الكثير الكثير يمكنك اكتشافه. الق نظرة على شرح شبكة موزيلا للمطورين لمعرفة المزيد.
يمكنك جعل موقعك يبدو أكثر جمالًا عند استخدام أجهزة الجوال، والأجهزة اللوحية وذلك باستخدام وسم meta viewport.
