ساخت حالت تمام ارتفاع صفحه در طراحی سایت

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

برای مثال به نمونه زیر توجه کنید که یکی از پروژه‌های طراحی شده توسط سئو نود است :

در این نمونه شما کاملا مشاهده می‌کنید بخش بالای سایت ، تمام ارتفاع نمایشگر را پوشش داده است . اکنون تفاوتی ندارد که شما این سایت را در نمایشگر 19 اینچ باز کنید یا 29 اینچ ، در هرصورت بخش hero section تمام ارتفاع نمایشگر را پوشش خواهد داد . ساخت این نمونه‌ها در پروژه‌های طراحی چندان سخت نیست و کافیست شما تنها 1 دستور در زبان طراحی CSS را بصورت درست استفاده کنید . در زبان CSS دستورات ارتفاع به شکل زیر هستند :

height
min-height
max-height

در این دستورات شما می‌توانید ارتفاع ثابت ، حداقل ارتفاع و همچنین حداکثر ارتفاع را مشخص کنید . برای اینکه پروژه شما ، ارتفاع خود را با هر نمایشگری به درستی تنظیم کند نباید از حالت height استفاده کنید چراکه در اینصورت شما ارتفاع را با دست خودتان محدود می‌کنید . در این ترند باید از دستور min-height استفاده کنیم که حداقل ارتفاع را تنظیم کرده باشیم .

برای تنظیم واحدها در CSS نیز مقادیر مختلفی داریم ازجمله :

px
%
rem
em
vh
vw
ex
ch

که هرکدام بسته به نوع طراحی استفاده خواهد شد . در این بین لازم است تا با واحد vh آسنا شوید . vh به معنی ” viewport height ” است . اگر معنی دقیق viewport height را می‌خواهید باید گفت : vh مخفف viewport height است . این واحد بر اساس ارتفاع درگاه دید است . مقدار 1vh برابر با 1% از ارتفاع دید است . مقدار 100vh برابر با 100% ارتفاع نمای پورت است . همچنین در این بین vw نیز مخفف viewport width است.

پس برای اینکه بتوانیم ارتفاع 100% برای بخش hero section را ایجاد کنیم ، لازم است تا از این واحد استفاده کنیم و برای قسمتی که قصد داریم تا این اتفاق برای آن رخ دهد دستوری بدین شکل بنویسیم :

.hero-section {
	min-height: 100vh;
	width: 100%;
}

در این حالت شما بسادگی می‌توانید یک hero section داشته باشید که هنگام ورود کاربر به سایت در داخل هر نمایشگری که مقدار viewport height متفاوت است ، سایت خود را بصورت تمام ارتفاع نمایش دهید .

مشاهده می‌کنید که انجام این مدل کارها بسیار ساده است و کافیست شما با اصول اصلی در زبان CSS و همچنین روش کدنویسی درست آشنا باشید . استفاده از یک دستور با ترکیب min و همچنین مقدار دهی بصورت vh می‌توانید این دیزاین‌های ترند را اجرا کنید .

ویژگی viewport height یک خصوصیت بسیار خوب برای سایت‌هایی است که طراحی اسلایدری دارند و احتمال دارد که از این نوع وب سایت‌ها نیز تاکنون زیاد مشاهده کرده باشید که وقتی با موس خودتان به سمت پایین اسکرول می‌کنید ، درهر اسکرول ، به اندازه تمام ارتفاع صفحه نمایشگر خودتان به سمت پایین حرکت می‌کنید .

درست است که این طراحی‌ها نیاز به کدنویسی جاوا اسکریپتی و … دارد اما درهرصورت بخش طراحی و پوشش تمام صفحه مربوط به زبان CSS و بهره‌گیری از ویژگی viewport height است . لذا اکنون شما نیز می‌توانید به کمک این خاصیت جذاب ، نمونه‌های بهتری را برای نمونه‌کار های خودتان ایجاد کنید .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا