![[ جافا سكربت ] زيادة حجم النص او انقاصه داخل HTML](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvsKajTZpsRWSwijDNPzZWU4y0frb-IeMOo9hyoe0vwzDj0lQabogU-NRKEgoLOLgK_oWpbbZRQ7PldV0kBGlWm_E0UdvJhSwujBra9u_TIFyhs8b8fgeaRXhuU5kfvTadX9jY4_6jGTOV/s72-c/Untitled-232.png)
 |
| بدايتك في جعل تصميم الموقع متجاوب |
بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته.
بدايتك في جعل تصميم الموقع متجاوب
التجاوب : التجاوب في تصميم الموقع يعني بأنك تجعل التصميم يتناسب مع كل الاجهزه التي تتصفحه , سواء كانت الصغيرة من اجهزة الهاتف او المتوسطه من مثل الاجهزه المحمولة التابلت او الكبيرة حتى من شاشات الكمبيوتر وغيرها .ولكي تجعل تصميم موقعك متجاوب ومناسب لجميع الشاشات فأنك بحاجة الى اساسيات وقواعد يجب عليك ان تتحرك وتبني تصميم موقعك فوقها , فأن خالفت هذه القواعد فـ بكل بساطه لن تستطيع تصميم موقع متجاوب بأمتياز.
في هذا الموضوع سأعلمك كيف تقوم بأنشاء تصميم متجاوب , وماهي أهم الاساسيات التي يجب عليك اتباعها , واهم الاكواد التي تستخدم في التجاوب , لكي تخرج بتصميم متجاوب بأمتياز ويرضيك.
--
الانتقال السريع في الموضوع :
اهم الاساسيات في التصميم المتجاوب , وينقسم الى :
- حجم القطعه واقصى طول وقصر لها.
- الـ padding و margin.
- حذف القطع الكبيرة داخل الاجهزه الصغيرة.
- اعطاء خاصية max-width.
- تركيب كود ميتا الخاص بالتجاوب.
افضل المقاسات في التصميم المتجاوب.
--
اهم الاساسيات في التصميم المتجاوب :
اولا : ان تراعي حجم القطعه واقصى طول وقصر لها , بمعنى انه عند التصميم المتجاوب فالأفضل هو وضع حد اقصى للقطعه التي تعمل عليها بحيث انها لا تتعدى المقاس الذي انت تعمل عليه مثل 480px ولا تقل عن مثلا 320px حيث انها تبقى تحت مضلة المقاس المتجاوب ولا تخرج عنه وتحدث مشاكل.
ثانياَ : الـ padding و margin في اغلب التصاميم المتجاوبه يجب عليك مراعاة هذه الخاصيتين حيث انهما يحدثان مشاكل عدة مثل خروج القطعه عن مساحتها المحددة , ولذالك يجب عليك تقليص حجم الحد الخارجي والحد الداخلي padding و margin اثناء التصميم من الاكبر الى الاصغر , لو مثلا كان لديك padding بحجم 40px في قطعه , وهذه القطعه مصممه لمقاس الشاشة في اجهزة الكمبيوتر , فلا ينفع وضع نفس الـ padding في اجهزة الهاتف , بل يجب تقليصها الى حجم اصغر مثل 5px وهكذا حسب ماتراه مناسب , هذه المشكلة لا ينتبه لها اغلب المصممين الا بعد نشر التصميم او تركيبه.
ثالثاَ : حذف القطع الكبيرة داخل الاجهزه الصغيرة , حيث انها بكل تأكيد تسبب تعليق في اجهزة الهاتف والتابلت فحاول قدر الامكان جعل القالب في اجهزة الهاتف والتابلت خفيف , لان الهدف الاساسي من التصميم المتجاوب هو ان تجعل القالب مناسب تماماَ لهذه الاجهزه فعندما تقوم بأكثار الاكواد والقطع والسكربتات والجافاسكربت داخله فأنك تقترف خطأ فادح ومعارض لهدفك الاساسي وهو التجاوب , فالتجاوب لا يكون فقط بتنظيم القالب بحث تكون مقاساته مناسبه لهذه الشاشه بل يجب ايضا مراعاة عدة عوامل منها حجم التصميم مقارنه بالشاشة , قم تستطيع بأمتياز تقليص القالب من شاشة 1080 الى 480 ولاكن الحجم كما هو 5 ميقا للصفحة , فهنا انت لم تفعل اي شيء مفيد بل العكس زدت الحال سوءاَ , لذالك الهدف ليس تقليص المقاسات فقط بل الحجم ايضا وعدد سكربتات جافاسكربت , حاول حذف ماتراه ليس مفيداَ في اجهزة الهاتف ولن يفيدها : كمثال : شريط اخر الاخبار.
رابعاَ : اعطاء خاصية max-width: 96%; من باب الاحتياط , حيث انها تفيد كثيراَ في حال كانت القطع التي داخل القطعه حجمها كبير فهي تقوم بتقليصها تلقائيا بحث لا تتعدى القطعه الخارجيه , كمثال لذالك : الصورة داخل التدوينة , قد تكون التدوينة متجاوبة بالكامل مع شاشة الهاتف ولاكن الصور التي داخل التدوينة اكبر من مقاس التدوينة فستلاحظ اما ان الصورة الخارجة عند الحد اختفت , او انها قد خرقت جدار التدوينة وخرجت خارجاَ , فالحل الامثل والانسب لمثل هذه المشكلة هو كما ذكرت اعطاء max-width: 96%; للقطعه الداخليه كي لا تتأثر القطعه الخارجيه .
خامساَ : تركيب كود ميتا الخاص بالتجاوب , بكل بساطه بدون هذا الكود الصغير فأن كل عملك وكل اكواد css للتجاوب لن تعمل , وهو مايسمى اطار العرض ووضيفة انه يهئي متصفح التابلت او الهاتف بحث تعرض الموقع باحجام اكبر , وتتجاوب مع التجاوب بشكل افضل , وهذا هو الكود يوضع داخل الـ <head>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
الان سأتكلم عن المقاسات في التجاوب.
افضل المقاسات في التصميم المتجاوب هي التي تستطيع ان تحتوي مقاسات اعلانات جوجل ادسنس , وسأدرجها الان :
@media only screen and (max-width:1100px) and (min-width:985px){
/*********** اكواد css هنا ***********/
اصغر مساحة للقطعه هو 985 واكبر مساحة لخا هو 1100 بمعنى ان القطعه محتكره بين هذه المقاسين
}
@media only screen and (max-width:984px) and (min-width:768px){
/*********** اكواد css هنا ***********/
اصغر مساحة للقطعه هو 768 واكبر مساحه لها هو 984 بمعنى ان القطعه محتكره بين هذه المقاسين.
}
@media only screen and (max-width:767px) and (min-width:480px){
/*********** اكواد css هنا ***********/
اصغر مساحة للقطعه هو 480 واكبر مساحة لها هو 767 , بمعنى ان القطعه محتكره بين هذه المقاسين.
}
@media only screen and (max-width:479px){
/*********** اكواد css هنا ***********/
المقاسات من 479 الى 0
}
عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.
معلومات عن التدوينة
صورة التدوينة
عنوان التدوينة :بدايتك في جعل تصميم الموقع متجاوب
ملخص التدوينة:
بدايتك في جعل تصميم الموقع متجاوب بسم الله الرحمن الرحيم والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم ا...
تاق :
شكرااااااااااااااااااااااااااااااااااااااااااااااااااااااااا د1
ردحذفموضوع قوي جدا هناك من يتحداك بنفس طرح , شكرا استفدت د2
ردحذفكل عام وانت بخير اخى عبدالله د1
ردحذفوانت بخير يااحمد
حذفممكن طود ده الىى فى مدونتك لو سمحت بتاع اطبع الصفحة وتكبير وتصغير الحجم http://cdn.top4top.co/i_5943e898241.png
ردحذفتم نشره مع القالب
حذفالشكل الجديد لمدونتك رائع اخى احييك
ردحذفاشكرك ياغالي ت1
حذف