» کدنویسی طرح دو ستونه و رسپانسیو با CSS خالص

کدنویسی طرح دو ستونه و رسپانسیو با CSS خالص

کدنویسی طرح دو ستونه و رسپانسیو با CSS خالص

سلام این یک آموزش پر ملات است! یک آموزش با نکات فنی بسیار! در این مقاله به مباحثی مانند رسپانسیو بودن در موبایل، منوی متحرک، ماژولار css و تنظیم تصویر بک گراند و دوستونه کردن و layout پرداخته میشود.

پیشنیاز

برای اینکه این اموزش را بهتر متوجه شوید بایستی با html css اشنایی داشته باشید! همین کافیست!

نگاه کلی به نتیجه در بروزر

میتوانید کدها را از این لینک بصورت فایل zip دانلود کنید، از حالت زیپ خارج نموده و روی فایل index.html کلیک کنید تا در بروزر نتیجه نهایی را به شکل زیر ببینید!



ماژولار css

دو پوشه میبینید! یکی img و دیگری css است. داخل پوشه css یک فایل به نام style.css است که اگر ان را باز کنید در ان کدهایی میبینید که فایل های دیگر css را به ان جا فراخوانی کرده ایم. به این ترتیب ماژولار css استفاده کردیم. به کد زیر نگاه کنید!


@import 'base.css'; 
@import 'modules/menu.css';
…


حالا به فایل index.html بروید و ببینید که بجای فراخوانی تمام فایل های css تنها فایل style.css فراخوانی شده است. منظور کد زیر است.


<link rel="stylesheet" href="css/style.css">

منو متحرک

برای اینکه منو همراه اسکرول موس به پایین، همراه با بروزر به پایین بیاید و همواره در بالای بروزر نمایان شود کافیست position: fixed به ان بدهیم. مانند قطعه کد زیر که در فایل menu.css وجود دارد.


.menu{
  background-color: rgba(255,255,255,.8);
  text-align: center;
  position: fixed; top: 0; right: 0; left: 0;
  z-index: 1
}


نکته دیگر اینکه z-index:1 میتواند از لحاظ سه بعدی یک المنت را به روی همه المنت ها بیاورد تا زیر المنت های دیگر پنهان نباشد. مقدارش بجای یک میتوانست هر عددی باشد. اگر مقدارش منفی باشد به زیر المنت ها میرود. برای توضیحات بیشتر میتوانید در گوگل z-index سرچ کنید!

رسپانسیو برای موبایل

رسپانسیو بودن در موبایل با رسپانسیو بودن در ابعاد کوچکتر بروزر با هم فرق میکند.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

اگر در برگ css از @media استفاده کنید ولی در برگ html شما، قطعه کد بالا نباشد، طرح شما رسپانسیو نمیشود!


برای اینکه در ابعاد گوشی galaxy s5 ابعاد را ببینید کافیست در بروزر کروم از دکمه F12 استفاده کنید! سپس ایکون موبایل بسیار کوچکی که کنار یک ایکون کوچک نشانگر موس است را فعال کنید! سپس از بین دستگاه ها galaxy s5 را انتخاب کنید! قطعه کد بالا را یکبار از html حذف کنید سپس به بروزر بروید و بروزر را رفرش کنید تا نتیجه را ببینید! فونت ها کوچک تر میشود و مانند صفحه نمایش بزرگ بروزر نمایش داده میشود.

تغییر layout وبسایت همزمان با تغییر عرض صفحه

وقتی بیشینه عرض صفحه تا 669 پیکسل باشد (ابعاد کوچک مثل صفحه نمایش موبایل) انگاه از قطعه کد max-width: 669px استفاده میشود. اگر بخواهیم طرحی را برای ابعاد بزرگتر از 670 پیکسل کدنویسی کنیم، کدهای ان را داخل @media با قطعه کد min-width: 670px مینویسیم.


اینجا فقط همین دو ابعاد را درنظر گرفتیم (ابعاد کوچکتر از 670 و بیشتر از 670 ) اما در پروژه های واقعی برای تبلت، موبایل، لپتاپ و دسکتاپ های بزرگ 4 صفحه ارایی مختلف انجام میشود. بسته به اینکه المان ها و قسمت های مختلف layout چقدر باشند ابعاد مختلف مقدار دهی میشوند.


مقدار دهی breakpoint ربطی به این ندارد که عرض صفحه نمایش موبایل و تبلت چقدر است. مهم این است که layout ما خوانا باشد. ممکن است این ابعاد برای خوانایی با ابعاد گوشی موبایل یا تبلت کمی متفاوت باشد.

پوزیشن های بچه و مادر

قبل از توضیح هرچیز این را به خاطر بسپارید که position مادر معمولا باید relative باشد تا بچه ها در ان جا بگیرند. اکثر اوقات راه حل همین است. پوزیشن پیشفرض برای تمام دیو ها static است. در این پروژه در فایل parent.css که برای بلاک parent و المنت هایش یعنی parent__article و parent__mainContent و parent__sidebar ایجاد شده است بیش از هر قسمت از پروژه از پوزیشن استفاده شده و نکته دارد.


.parent__article{
position: relative;
 float: left; /* challenge: solve the problem */
 padding-bottom: 30px ;
 padding-top: 40px; /* menu fit the article */
} 


به این قطعه کد در برگ parent.css توجه کنید. به خط دوم که پوزیشن دارد نگاه کنید! اگر این خط را حذف کنید و بروزر را رفرش کنید خواهید دید تمام صفحه به هم میریزد.

یک چالش برای تغییر پوزیشن دکمه بنفش

شما را به چالش دعوت میکنم.


گام اول: روی index.html کلیک کرده تا در بروزر همه چیز را ببینید!

گام دوم: در سومین قسمت از صفحه بروزر دو دکمه بنفش است! که میخواهیم ان را تغییر پوزیشن بدهیم!

گام سوم: به قطعه کد زیر در برگ download-div.css بروید! ان را از کامنت بودن در بیاورید!

/* position: absolute; right: 0; bottom:0; */


گام چهارم: به فایل parent.css بروید و دو خط کد مربوط به پوزیشن را از حالت کامنت خارج نمایید


/* position: relative; */


حالا بروزر را رفرش کنید و نتیجه را ببینید! میتوانید بگویید چه اتفاقی افتاد؟


از مطالعه شما سپاسگذارم!!


فرم ارسال نظر


مطالب پیشنهادی از سراسر وب




آخرین مطالب این وبلاگ

آخرین مطالب مجله