استارت‌آپ و کارآفرینی

ساخت بخش‌های تمام‌صفحه فقط با یک خط CSS

امروزه وب سایت‌های مدرن توی صفحه اصلی‌شون (home page) بخش‌هایی دارن که در اصطلاح بشون میگیم تمام صفحه (full screen). برای مثال یعنی بخشی که ۹۰% صفحه مرورگر رو می‌پوشونه. برای ساخت و پیاده سازی چنین بخش‌هایی خیلی مرسوم هست که از جاوااسکریپت استفاده کنن. که لازمش زمان و کد زدن زیادِ. برای درک بهتر چندتا از همین سایت‌ها رو در ادامه می‌بینید:

www.flickr.com

flickr
فلیکر

 

www.beeptunes.com

Beeptunes
بییپ تونز

 

و چند نمونه دیگه: اسپاتیفای، اکسپوژر و واندرکیندر

حالا چطور میتونیم فقط با یک خط css چنین چیزی رو بسازیم ؟

فقط کافیه کد زیر رو بکار ببرید 🙂

.section { height: 100vh; }

(Viewport Height) یعنی در واقع هر ۱vh مساوی‌ست با ۱% از ارتفاع پنجره‌ی مرورگر بدون در نظر گرفتن سایز مرورگر. این یک روش قدرتمند وسریعِ که کلی کاربرد متفاوت میتونید ازش داشته باشید. درمورد پیشتیبانی مرورگرها باید بگم ۷۸٫۳۸% مرورگرها ازش پشتیبانی میکنن. برای جزئیات بیشتر به Caniuse.com سر بزنید.

Caniuse.com
Caniuse.com

 دیدن سورس کد | دیدن دموی آنلاین

منبع: +

6 نظرات
  1. امین ضیا می گوید

    عالی حاجی، عالی

    1. بنیامین نجفی می گوید

      لطف داری امین جان.

  2. آیدین خلصی می گوید

    خیلی خوبه
    همیشه اندازه Height مشکل بوده واسه من توی اکثر طراحی ها

    1. بنیامین نجفی می گوید

      خوشحالیم که مفید واقع شده آیدین جان : )

  3. پویا جباری ثانی می گوید

    فوق العاده بود. شده وقتی که واسه همین مشکل سه روز وقتم گرفته شده!

  4. علی موسوی می گوید

    خیلی عالیه! اتفاقا برای من همین چند هفته پیش نیاز مبرم بود که با کلی بدبختی و به روش دیگه ای شبیه سازی کردم!
    در مورد ساپورتش هم امیدوارم این کمپانی ها سر ساپورت کد ها با هم به یه هماهنگی برسن که طراحان وب رو اینقدر به دردسر نندازن!

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.