HTML Responsive Web Design
-
بنتعلم في هذا المقال كيف ممكن نعمل صفحه تتناسب مع الاحجام المختلفة للشاشات، اكيد عند فتح الصفحة في الموبايل مختلف عن اللاب توب وعن شاشة الكمبيوتر وغيرها. عند الكلام عن Responsive اكيد بنحكي عن Browser’s viewport والي هي الجزء من الشاشة للمستخدم (منطقة العرض المرئية للمستخدم في صفحات الويب ) واكيد الحجم مختلف حسب حجم الجهاز (في حال العرض عن طريق الموبايل او الكمبيوتر او اللاب توب وغيرها). فا بناء على حجم الشاشة اكيد طريقة العرض بتكون مختلفة وحتي نضمن تكون الصفحه متناسقة مع جميع الاحجام.
لتطبيق ذلك بنستخدم الكود:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
واكيد هذا الكود يجب اضافه في الجزء Head في الصفحه.
لاحظ ان حددنا في هذا السطر العرض width والي بكون بحجم عرض الجهاز المستخدم device-width. بينما الامر initial-scale بعمل تحديد حجم التكبير المبدئي عند تحميل الصفحة للمرة الأولى.
حتى نفهم الموضوع بشكل احسن طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html>
<head>
<title>حكم وامثال</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body {background-color: powderblue;}
h2 {color: red;}
p {color: blue;}
</style>
<body><h2 id="wisdomh2" >حكم وامثال</h2><img src="BMW.jpg"><p>العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا .العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا .العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا .العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.</p></body>
</html>
النتيجة
الان خلونا نحذف الكود المحدد بخلفيه اصفر وشوف النتيجة.
النتيجة
وحتي تشوف الفرق بشكل واضح لازم تعمل طريقة العرض في المتصفح باستخدام الموبايل وحتي نعملها:
انقر يمين في أي مكان في الشاشة وبعدها ختار inspect
وبعدها بختار العرض باستخدام الموبايل (العلامة بالأحمر)
Responsive Images
المقصود هنا هو التحكم بحجم الصور لتناسب حجم الشاشة، والهدف عرض الصورة بشكل جميل.
نطبق مثال حتي نفهم الموضوع:
<!DOCTYPE html>
<html dir="rtl">
<head ><title>حكم وامثال</title><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body {background-color: powderblue;}
h2 {color: red;}
p {color: blue;}
</style>
<body><h2 id="wisdomh2" >حكم وامثال</h2><img src="BMW.jpg" style="max-width:100%;height:auto;"><p>العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.</p></body>
</html>
استخدمنا مع الصورة هون الخاصية max-width واعطيناها القيمة 100%، هذا الكود يعمل على تنسيق حجم الصورة لتناسب الشاشة المعروضة عليها، بحيث يتم تصغير الصورة اذا لزم الامر، ولن يتم تكبير الصورة اكبر من حجمه الأصلي.
طبق المثال وحاول تكبير وتصغر الشاشة، غير طريقة العرض الي الموبايل وشوف النتيجة. اكيد بتشوف ان الصورة متناسقة مع حجم الصفحه.
تغيير حجم الخط
يمكن تغيير حجم الخط ليتناسب مع حجم Viewport ، ولتطبيق ذلك بنستخدم وحدة القياس vw والي هي تساوي viewport width
طبق المثال التالي لفهم الموضوع
<!DOCTYPE html>
<html dir="rtl">
<head ><title>حكم وامثال</title><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body {background-color: powderblue;}
h2 {color: red;}
p {color: blue;}
</style>
<body><h2 id="wisdomh2" style="font-size:5vw" >حكم وامثال</h2><img src="BMW.jpg" style="max-width:100%;height:auto;"><p>العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.</p></body>
</html>
شغل الصفحة وحاول تغير في حجم الشاشة، اكيد بتلاحظ ان حجم الخط متغير لتناسب مع حجم الشاشة
Viewport هو حجم شاشة المتصفح browser window size
1vw=1% of viewport width
مثال :
اذا كان حجم viewport يساوي 10cm فهذا يعني ان 1vm يساوي 0.1 cm
Media Queries
تستخدم media queries أيضا للتعامل مع responsive web page. يمكن من خلالها التعامل مع الاحجام المختلفة للشاشات.(بمعني ان اذا كان عرض الشاشة مثلا يساوي 600px يتم تطبيق نمط مختلف عن لو كان حجم الشاشة 800px)
طبق المثال التالي حتي نفهم الموضوع :
<!DOCTYPE html>
<html dir="rtl">
<head >
<title>حكم وامثال</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
h2 {color: red;}
p {color: blue;}
body {
background-color: #fff;
}
@media (min-width: 30em) and (max-width: 80em) {
body {
background-color: rgb(45, 124, 111);
}
}
</style>
<body><h2 id="wisdomh2" style="font-size:5vw" >حكم وامثال</h2><img src="BMW.jpg" style="max-width:100%;height:auto;"><p>العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.</p></body>
</html>
شغل الصفحة وغير حجم المتصفح تصغير وتكبير اكيد بتلاحظ عند حجم معين بتم تغيير لون الخلفية للصفحة الى اللون rgb(45, 124, 111) .
المسؤول عن تحديد ذلك هو الامر media@
الكود السابق بيعني ان اذا كان حجم الشاشة بين 30em و 80em سيتم تطبيق اللون المطلوب.
تحديد حجم الشاشة
لا يوجد ارقام معينه يمكن تطبيقها على حجم الشاشة ولكن بشكل عام المقاسات التالية تعتبر الأكثر شيوعا:
- 320px
- 480px
- 600px
- 768px
- 900px
- 1024px
- 1200px
طبق المثال التالي في صفحة HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.left {
background-color: #6e7174;
padding: 20px;
color: white;
float: left;
width: 33%;
}
.center {
background-color: #1b1b1b;
color: white;
padding: 20px;
float: left;
width: 33%;
}
.right {
background-color: #045738;
padding: 20px;
float: left;
width: 33%;
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
.left, .center, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
</head>
<body>
<button class="left">Button1</button>
<button class="center">Button2</button>
<button class="right">Button3</button>
</body>
</html>
شغل الصفحة وغير حجم الشاشة اكيد بتلاحظ عند حجم معين ان buttons بتغير ترتيبهم . وهذا الحجم حسب ما حددنا بكون عندما يصبح حجم الشاشة 800px واقل.
الكود
@media screen and (max-width: 800px)
يعني ان اقصى حجم يتم تطبيق هذ التغيير عليه يبدأ من 800px والاحجام الي اقل من ذلك بطبيعة الحال يتم التطبيق عليها.
اترك تعليقك