سبق لي وأن تحدثت في تدويناتي السابقى عن التصميم التجاوبي أو الـ Responsive Web Design ومن هذه التدوينات نذكر :
أنفوجرافيك يشرح طريقة عمل التصميم التجاووبي : رابط التدوينة من هنا .
تفعيل خاصية البينش تو زووم PinchToZoom لتصفح أسهل وأرتح في الأجهزة الأخرى : رابط التدوينة من هنا.
كذلك سبق لي وذكرت حل لإخفاء وإظهار الأدوات في نسخة الهاتف بالنسبة لمستعملي منصة البلوجر : رابط التدوينة تفضل من هنا .
بالنسبة لتدوينة اليوم فهو درس تطبيقي لشرح جعل موقعك متجاوب بإستعمال تقنية الـ Media Query تمت إضافة هذه الخاصية في الإصدار الثالث لـ CSS .
وهذا مثال بسيط :
سكتب شفرتك في ملف الcss الخاص بك ,المهم الأن هنا :
احذف الكود الخاص ب css الخاص بك و يكون عملك هنا
احذف الكود الخاص ب css الخاص بك و يكون عملك هنا
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
لم تفهم جيدا ؟؟ إليك مثال تطبيقي :لدي ال css الخاص بي :.logo{width:300px;}.header{width:1000px;}سنحاول جعله متوافقا مع جميع الأجهزة كما نريد
@media screen and (max-width : 1024px) { .logo{width:250px;} .header{width:800px;}}
@media screen and (max-width : 768px) { .logo{width:200px;} .header{width:600px;}}
@media screen and (max-width : 640px) { .logo{width:150px;} .header{width:450px;}}
@media screen and (max-width : 480px) { .logo{width:250px;} .header{width:300px;}}
@media screen and (max-width : 320px) { .logo{width:200px;} .header{width:250px;}}
وسيظهر بأشكال نريدها نحن في كل جهاز ,
@media screen and (max-width : 1024px) { .logo{width:250px;} .header{width:800px;}}
@media screen and (max-width : 768px) { .logo{width:200px;} .header{width:600px;}}
@media screen and (max-width : 640px) { .logo{width:150px;} .header{width:450px;}}
@media screen and (max-width : 480px) { .logo{width:250px;} .header{width:300px;}}
@media screen and (max-width : 320px) { .logo{width:200px;} .header{width:250px;}}
وسيظهر بأشكال نريدها نحن في كل جهاز ,
مازلت محتارا ؟ إليك هذا الفيديو من قناة ArabicHtml على اليوتيوب يوضح فيها الطريقة المستخدة وأنا على يقين أنك لن تخرج من هذه الصفحة إلى وفهمت كل شئ عزيزي القارئ . لن أطيل عليك .
في أمان الله
