logo, ali, hamdi

Download the Responsive Web Design, By: AliHamdi  http://alihamdi.com/downloads/ResponsiveWebDesign-AliHamdi.pdf 

 

كيفية تكويد صفحة ويب بالتصميم المتجاوب Responsive Design  ؟

يختلف متصح كل جهاز عن الآخر لعرض صفحات الإنترنت، ومن المهام التي تقع على مصمم الويب المحترف أن ينتج صفحة ويب تصل لكل الزائرين بمستوى عالي بغض النظر عن الأجهزة التي يستخدم كل منهم لذلك ظهر ما يسمى بتصميم الويب المتجاوب وهو أسلوب لتصميم مواقع الويب يسمح لك بإنشاء موقع ويب يتكيف مع الجهاز الذي يتم عرضه عليه،فإذا كان جهاز كمبيوتر محمول أو هاتفًا ذكيًا أو جهازًا لوحيًا فإن الموقع يقوم تلقائيا بتعديل حجم الواجهة والصفحات حسب المقاسات الجديدة للعرض، ويتم تكويد هذا التصميم بإستخدام HTML5  و CSS3.

 

إضافة كود التحويل من العرض العام إلى العرض حسب الجهاز الحالي:

هذا الكود فقط يقوم بجعل عملية الإنتقال من العرض العادي للصفحة إلى العرض حسب الجهاز الحالي تظهر بشكل مرن وجميل ولا تكون فجأة وغير جميلة:

body, img {

        transition:all .2s linear;

        -o-transition:all .2s linear;

        -moz-transition:all .2s linear;

        -webkit-transition:all .2s linear;

}

عملية تغيير حجم الخط بالتناسب مع الشاشة:

بشكل عام نقوم بعمل الفونت للصفحة كالتالي:

body {

        font:1em/1.5em ‘Verdana’, ‘Arial’, sans-serif;

}

وهنا نضع شرط أنه في حالة الشاشات التي أقل من 800بيكسل كالتالي:

@media screen and (max-width:800px) {

        body {

               font-size:0.8em;

        }

}

وهنا نضع شرط أنه في حالة الشاشات التي أقل من 400بيكسل كالتالي:

@media screen and (max-width:400px) {

        body {

               font-size:0.7em;

        }

}

 

التعامل مع الصور:

هنا لابد من التعامل الصورة أيضا كما تعاملنا مع الخطوط في المثال الأول:

body {

        font:1em/1.5em ‘Verdana’, ‘Arial’, sans-serif;

}

img {

        width:400px;

}

الشاشات التي أقل من 800بيكسل كالتالي:

@media screen and (max-width:800px) {

        body {

               font-size:0.8em;

        }

        img {

               width:300px;

        }

}

الشاشات التي أقل من 800بيكسل كالتالي:

@media screen and (max-width:400px) {

        body {

               font-size:0.7em;

        }

        img {

               width:200px;

        }

}

إستعلامات للأجهزة القياسية:

فيما يلي الإستعلامات التي من الممكن أن تحتاجها في تصميم الويب المتجاوب وهي طبعا لأغلب أجهز العرض الحديثة:

v      الهواتف الذكية سواء عرض أفقي أو رأسي.

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

/* Styles */

}

/* Smartphones (landscape) ———– */

@media only screen and (min-width : 321px) {

        /* Styles */

}

/* Smartphones (portrait) ———– */

@media only screen and (max-width : 320px) {

        /* Styles */

}

v      iPads.

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

        /* Styles */

}

/* iPads (landscape) ———– */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)

and (orientation : landscape) {

        /* Styles */

}

/* iPads (portrait) ———– */

@media only screen and (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait) {

        /* Styles */

}

v      أجهزة سطح المكتب

v      الحواسب المحمولة

@media only screen and (min-width : 1224px) {

        /* Styles */

}

v      الشاشات الكبيرة.

@media only screen and (min-width : 1824px) {

        /* Styles */

}

v      iphone4

@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {

        /* Styles */

}

أمثلة لصفحات ويب متجاوبة:

25 Beautiful Responsive Web Design Examples for Inspiration

30 Example

60 Examples of Responsive Website Design

60+ Creative Examples of Responsive Web Design

24 Excellent Examples of Responsive Web Design

This post has 4962 Views

One response to “Responsive Design , Arabic”

  1. FAISAL says:

    أنت رائع يا أستاذ علي، ربنا يحفظك. شكرا جزيلا على الشرح.

    alert(1);

Leave a Reply

Your email address will not be published. Required fields are marked *