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

كيفية إنشاء موقع على شبكة الانترنت لجميع الأجهزة

الآن يمكنك جعل الموقع مع تخطيط واحد فقط، والتي سوف تعمل على الأجهزة بدءا من الهواتف،الي أجهزة التلفزيون الكبيرة.

وهذا يسمي الويب المستجيب لأي موقع :

الفكرة الأساسية هي صيغة لحساب النسب المئوية «الهدف / النتيجة = السياق». على سبيل المثال، لدينا تخطيط PSD مع عرض 1000px. انها قسمين : واحد على اليسار عرض 270pxوأخر 730px . سنرمز لهم بهذه الطريقة :

[html] .leftcolumn { width: 27%; /* 270px / 1000px = 0,27 */ float: left; } rightcolumn { width: 73%; /* 730px / 1000px = 0,73 */ float: right; }

[/html]

العمود الأيسر سيكون كتلة واحده،عرض 170px،

[html] .leftcolumn .some-div { width: 62,962963%; /* 170px / 270px = 0.62962963 */ float: left; }
[/html]

استفسارات وسائل الإعلام

نحن في حاجة إليها لإظهار التخطيط الأمثل لحلها. هذا هو جزء من معيار CSS ،  على سبيل المثال :

[html] /* beginning css */

[/html]

على سبيل المثال ، للهواتف المحمولة التي ليست من مستوى رفيع الغاية. Internet Explorer هو نفسه ويندوز موبايل 6.5 .

[html] @media only screen and (min-width: 480px)
[/html]

وهذا أيضا لـAndroid, iPhone

[html] @media only screen and (min-width: 768px) {
[/html]

المحمول أولا
هذا الإسلوب يقوم بترميز موقع للأجهزة مع فرص أقل ثم تضاف ميزات استخدام مع استفسارات سائل الإعلام. هذه هي الطريقة’المتصفحات الغبية” دون فهم واستخلاص الصفحة ، مع الأخذ بعين الاعتبار استفسارات وسائل الإعلام.