طراحي سايت با طراحي وب واكنشي بخش چهارم (آخر) CSS3 Media Queries

تنها مرجع حرفه اي مقالات طراحي سايت در مشهد به صورت تخصصي

پنجشنبه ۰۶ اردیبهشت ۰۳

طراحي سايت با طراحي وب واكنشي بخش چهارم (آخر) CSS3 Media Queries

۱۵ بازديد

پس از يادگيري Media Query ها در طراحي سايت در مشهد در قسمت پيشين، هم اكنون خواهيم توانست با استعمال از اين خصوصيت در طراحي وب يك قالب بي آلايش با 3 رديف و Header را ريسپانسيو كنيم.

به صورت كلي قالب دقت فرماييد:

همان گونه كه ميبينيد در طراحي وب سايت همه اندازه ها به طور درصدي وارداتي ميباشداكنون با استعمال از Media Query ها در طراحي وب استارت به ريسپانسيو كردن قالب مي‌كنيمدر صدر يك مضمون‌ به اسم viewport آشنا شويم. اين لغت در معناي محدوده اكران ورقه براي مخاطب ميباشد. براي اكران وب سايت در تلفن همراه هاي تلفن همراه، تبلت ها و ... مي بايست تك متا viewport را براي تهيه و تنظيم محدوده اكران وب سايت به ورقه خويش اضافه فرماييد. اين تگ سبب ساز مي گردد كه محدوده viewport براي پهنا دستگاه تهيه و تنظيم خواهد شد. و با مقدار دهي device-width به تگ viewport به مرورگر مي‌گوييم پهنا دستگاه را با پهنا ورقه اكران يكي‌از كن به عنوان مثال در شرايطي‌كه پهنا دستگاه 320px ميباشد، به مكان آن كه مقدار پيش فرض 980px را به پهنا برگه تخصيص دهد به عبارتي مقدار را به پهنا برگه تخصيص بدهد.



اكنون با به كارگيري از يادگرفتن هاي نصيب قبل نوشته ي علمي (دعوا Media Query ها( آغاز به تايپ كردن كد هاي Media Query ميكنيم.

در صدر با خار كردن مرورگر خويش متوجه ميشويد كه تارنما نيز تغيير و تحول اندازه ميدهداما دقت بدين نكته ضروري ميباشد كه با كوجك شدن تارنما از پهنا از جمله 1024px به زير رديف هاي راست و چپ خيلي كوچك مي‌شوند و عملا بايستي يكي رديف هاي را براي اكران بهتر تارنما حذف كرد. اين عمل را با كد ذيل ميتوانيد ايفا دهيم:





همانطور كه مشاهده ميكنيد در ساخت سايت در پهنا  تحت خيس از 1024px با ايفا كد بالا اندازه Box را ارتقاء و رديف سمت چپ را حذف مي‌كنيم كه سبب ساز اكران بهتر و خواناتر تارنما در موبايل هاي يار و تبلت ها و ... شود.

با بيشتر كوچكتر كردن مرورگر متوجه مي شويم كه در پهنا زير از 480px رديف سمت راست نيز خوانايي مطلوب را ندارد و مي بايست حذف شود. پس با جاري ساختن كد تحت وبسايت به صورت پايين در خواهد آمد:





درين نصيب از فراگيري طراحي وب سايت با ساخت سايت واكنشي توانستيم يك قالب معمولي را ريسپانسيو كنيم. دقت داشته بايستي قالب هاي ديگر با اعتنا به ابهام، به طور طبيعي فرصت و دقت بيشتري نياز دارااست.

براي مشاهده مثال اعمال گرديده طراحي وب سايت با طراحي سايت واكنشي (Responsive) ميتوانيد از تارنما مجموعه هتل الماس مشهد  يكي‌از ساخت وب سايت هاي  كمپاني داده پردازي فراتك  بازديد نماييد:  طراحي وب سايت هتل الماس مشهد

كمپاني داده پردازي فراتك با پباده سازي بيشتراز 500 سايت، در سال هاي عمل خويش و با استفاده اين تكنولوژي فراهم ارائه سرويس ها در قضيه ساخت سايت با خصوصيت هاي منحصربه‌فرد ميباشد. از مثال ساخت وب سايت هاي ما ديدن فرمائيد

یادگیری سی اس اس (CSS) یکی از اصولی‌ترین و بنیادی‌ترین مفاهیم در طراحی وب است. CSS این امکان را به توسعه‌دهندگان وب می‌دهد تا ظاهر و استایل صفحات وب را به طور کامل کنترل کنند. از طریق CSS، می‌توان به عناصر HTML اسلایدها، رنگ‌ها، فونت‌ها، فضای بین النگ ها، اندازه‌ها، حاشیه‌ها، و سایر ویژگی‌ها را تعیین کرد.

 

یادگیری CSS به دانشمندان وب این امکان را می‌دهد که به طراحی جذابتر و کاربرپسندتر صفحات وب دست پیدا کنند. از آنجا که CSS یک زبان ساده و قابل فهم است، حتی برای مبتدیان نیز قابل یادگیری است. با استفاده از CSS، می‌توان انعطاف‌پذیری بیشتری در طراحی وبسایت‌ها داشت و آن‌ها را سازگار با مرورگرها و دستگاه‌های مختلفی مانند کامپیوترها، تبلت‌ها و تلفن‌های همراه نمود. این برنامه‌ها را قادر می‌سازد تا تجربه کاربری بهتری ارائه دهند و به طراحان وب اجازه می‌دهد تا خلاقیت خود را در طراحی وبسایت‌ها به نمایش بگذارند.

ارسال نظر آزاد است، اما اگر قبلا در مونوبلاگ ثبت نام کرده اید می توانید ابتدا وارد شوید.