طراحی تعاملی

این کد لبه بخشی از دوره آموزشی Developing Progressive Web Apps است که توسط تیم آموزشی Google Developers ایجاد شده است. اگر به ترتیب روی کدها کار کنید، بیشترین ارزش را از این دوره خواهید گرفت.

برای جزئیات کامل در مورد دوره، به نمای کلی توسعه برنامه های وب پیشرفته مراجعه کنید .

مقدمه

این آزمایشگاه به شما نشان می دهد که چگونه محتوای وب سایت خود را به گونه ای استایل دهید که آن را ریسپانسیو کنید.

چیزی که یاد خواهید گرفت

  • چگونه به برنامه خود استایل دهید تا در چندین فرم به خوبی کار کند
  • نحوه استفاده از Flexbox برای سازماندهی آسان محتوای خود در ستون ها
  • نحوه استفاده از پرسش های رسانه ای برای سازماندهی مجدد محتوای خود بر اساس اندازه صفحه نمایش

آنچه شما باید بدانید

  • HTML و CSS اولیه

آنچه شما نیاز خواهید داشت

  • کامپیوتر با دسترسی ترمینال/پوسته
  • اتصال به اینترنت
  • ویرایشگر متن

مخزن pwa-training-labs را از github دانلود یا کلون کنید و در صورت نیاز نسخه LTS Node.js را نصب کنید.

اگر سرور توسعه محلی ترجیحی ندارید، بسته http-server Node.js را نصب کنید:

npm install http-server -g

به دایرکتوری responsive-design-lab/app/ بروید و سرور را راه اندازی کنید:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

شما می توانید سرور را در هر زمان با Ctrl-c خاتمه دهید.

مرورگر خود را باز کنید و به localhost:8080/ بروید.

توجه: همه سرویس‌کاران را لغو ثبت کنید و تمام کش‌های سرویس‌کار را برای لوکال هاست پاک کنید تا با آزمایشگاه تداخل نداشته باشند. در Chrome DevTools، می‌توانید با کلیک کردن بر روی پاک کردن داده‌های سایت از بخش پاک کردن فضای ذخیره‌سازی تب Application به این مهم دست یابید.

اگر ویرایشگر متنی دارید که به شما امکان می دهد پروژه ای را باز کنید، پوشه responsive-design-lab/app/ را باز کنید. این کار سازماندهی را آسان تر می کند. در غیر این صورت، پوشه را در سیستم فایل کامپیوتر خود باز کنید. app/ پوشه جایی است که آزمایشگاه را می سازید.

این پوشه شامل:

  • index.html صفحه اصلی HTML برای نمونه سایت/برنامه ما است
  • modernizr-custom.js یک ابزار تشخیص ویژگی است که تست پشتیبانی از Flexbox را ساده می کند
  • styles/main.css شیوه نامه آبشاری برای سایت نمونه است

به برنامه در مرورگر برگردید. سعی کنید عرض پنجره را به کمتر از 500 پیکسل کاهش دهید و متوجه شوید که محتوا به خوبی پاسخ نمی دهد.

ابزارهای توسعه دهنده را باز کنید و حالت دستگاه را در مرورگر خود فعال کنید. این حالت رفتار برنامه شما را در یک دستگاه تلفن همراه شبیه سازی می کند. توجه داشته باشید که صفحه به اندازه محتوای با عرض ثابت روی صفحه کوچک شده است. این تجربه خوبی نیست زیرا احتمالاً محتوا برای اکثر کاربران بسیار کوچک است و آنها را مجبور به بزرگنمایی و حرکت می کند.

TODO 3 را در index.html با تگ زیر جایگزین کنید:

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

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

توجه: شبیه سازی دستگاه به شما تقریب نزدیکی از نحوه ظاهر سایت شما در دستگاه تلفن همراه می دهد، اما برای دریافت تصویر کامل، همیشه باید سایت خود را بر روی دستگاه های واقعی آزمایش کنید. می‌توانید درباره اشکال‌زدایی دستگاه‌های Android در Chrome و Firefox اطلاعات بیشتری کسب کنید.

توضیح

یک تگ متا ویوپورت به مرورگر دستورالعمل هایی در مورد نحوه کنترل ابعاد و مقیاس صفحه می دهد. ویژگی width اندازه نما را کنترل می کند. می توان آن را روی تعداد خاصی از پیکسل ها (به عنوان مثال، width=500 ) یا مقدار ویژه device-width, که عرض صفحه در پیکسل های CSS در مقیاس 100٪ است، تنظیم کرد. (مقادیر height و device-height مربوطه وجود دارد که می تواند برای صفحات دارای عناصری که اندازه یا موقعیت خود را بر اساس ارتفاع درگاه دید تغییر می دهند مفید باشد.)

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

برای اطلاعات بیشتر

TODO 4 را در styles/main.css با کد زیر جایگزین کنید:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

فایل را ذخیره کنید. حالت دستگاه را در مرورگر غیرفعال کنید و صفحه را بازخوانی کنید. سعی کنید عرض پنجره را کوچک کنید. توجه داشته باشید که محتوا به یک طرح بندی ستونی در عرض مشخص شده تغییر می کند. حالت دستگاه را دوباره فعال کنید و مشاهده کنید که محتوا متناسب با عرض دستگاه پاسخ می دهد.

توضیح

برای اطمینان از اینکه متن قابل خواندن است، زمانی که عرض مرورگر به 48 ریم (768 پیکسل در اندازه فونت پیش‌فرض مرورگر یا 48 برابر اندازه فونت پیش‌فرض در مرورگر کاربر) می‌شود، از یک درخواست رسانه استفاده می‌کنیم. برای توضیح خوب در مورد اینکه چرا rem انتخاب خوبی برای واحدهای نسبی است ، زمان استفاده از Em vs Rem را ببینید. هنگامی که درخواست رسانه فعال می شود، با تغییر width هر یک از سه div برای پر کردن صفحه، طرح بندی را از سه ستون به یک ستون تغییر می دهیم.

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

قوانین موجود در CSS را بیان کنید

همه قوانین را در styles/main.css با قرار دادن آنها در /* و */ نظر دهید. ما این قوانین را برای زمانی که Flexbox در بخش Flexbox به عنوان پیشرفت پیشرونده پشتیبانی نمی‌شود، قوانین بازگشتی خود را ایجاد می‌کنیم.

طرح بندی Flexbox را اضافه کنید

TODO 5.2 را در styles/main.css با کد زیر جایگزین کنید:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

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

توضیح

قانون اول container div به عنوان ظرف انعطاف پذیر تعریف می کند. این یک زمینه منعطف را برای همه فرزندان مستقیم خود فراهم می کند. ما در حال ترکیب سینتکس قدیمی و جدید برای گنجاندن Flexbox برای دریافت پشتیبانی گسترده‌تر هستیم ( برای اطلاعات بیشتر به جزئیات مراجعه کنید).

قانون دوم از کلاس .col برای ایجاد فرزندان انعطاف پذیر با عرض مساوی استفاده می کند. تنظیم اولین آرگومان ویژگی flex به 1 برای همه div ها با کلاس col ، فضای باقی مانده را به طور مساوی بین آنها تقسیم می کند. این راحت تر از محاسبه و تنظیم عرض نسبی خودمان است.

برای اطلاعات بیشتر

اختیاری: عرض های نسبی مختلف را تنظیم کنید

از کلاس شبه nth-child برای تنظیم عرض نسبی دو ستون اول بر روی 1 و ستون سوم به 1.5 استفاده کنید. شما باید از ویژگی flex برای تنظیم عرض های نسبی برای هر ستون استفاده کنید. به عنوان مثال، انتخابگر برای ستون اول به شکل زیر است:

.container .col:nth-child(1)

از پرسش های رسانه ای با Flexbox استفاده کنید

TODO 5.4 را در styles/main.css با کد زیر جایگزین کنید:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

کد را ذخیره کرده و index.html در مرورگر خود بازخوانی کنید. اکنون اگر عرض مرورگر را کوچک کنید، محتوا در یک ستون دوباره سازماندهی می شود.

توضیح

هنگامی که پرس و جو رسانه فعال می شود، با تنظیم ویژگی flex-flow روی column ، طرح را از سه ستونی به یک ستونی تغییر می دهیم. این کار همان نتیجه‌ای را به دست flex-flow که درخواست رسانه‌ای که در مرحله 5 اضافه کردیم .

از آنجایی که Flexbox یک فناوری نسبتاً جدید است، ما باید در CSS خود بک گراندها را قرار دهیم.

Modernizr را اضافه کنید

Modernizr یک ابزار تشخیص ویژگی است که تست پشتیبانی از Flexbox را ساده می کند.

TODO 6.1 را در index.html با کدی جایگزین کنید تا بیلد سفارشی Modernizr را شامل شود:

<script src="modernizr-custom.js"></script>

توضیح

ما یک ساخت Modernizr را در بالای index.html قرار می دهیم که پشتیبانی از Flexbox را آزمایش می کند. در صورتی که مرورگر از Flexbox پشتیبانی کند، این تست را در بارگذاری صفحه اجرا می‌کند و کلاس flexbox به عنصر <html> اضافه می‌کند. در غیر این صورت، یک کلاس no-flexbox به عنصر <html> اضافه می کند. در قسمت بعدی این کلاس ها را به CSS اضافه می کنیم.

توجه: اگر از ویژگی flex-wrap Flexbox استفاده می‌کردیم، باید یک آشکارساز Modernizr جداگانه فقط برای این ویژگی اضافه کنیم. نسخه‌های قدیمی‌تر برخی از مرورگرها تا حدی از Flexbox پشتیبانی می‌کنند و این ویژگی را ندارند.

از Flexbox به تدریج استفاده کنید

بیایید از کلاس های flexbox و no-flexbox در CSS برای ارائه قوانین بازگشتی زمانی که Flexbox پشتیبانی نمی شود استفاده کنیم.

اکنون در styles/main.css ، .no-flexbox در مقابل هر قانون که نظر داده ایم اضافه کنید:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

در همان فایل، جلوی بقیه قوانین، .flexbox اضافه کنید: 

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

به یاد داشته باشید که اگر مرحله اختیاری 5.3 را تکمیل کرده اید، .flexbox به قوانین ستون های جداگانه اضافه کنید.

کد را ذخیره کنید و index.html در مرورگر بازخوانی کنید. صفحه باید مانند قبل به نظر برسد، اما اکنون در هر مرورگری در هر دستگاهی به خوبی کار می کند. اگر مرورگری دارید که از Flexbox پشتیبانی نمی‌کند ، می‌توانید قوانین بازگشتی را با باز کردن index.html در آن مرورگر آزمایش کنید.

برای اطلاعات بیشتر

شما یاد گرفته اید که به محتوای خود سبک دهید تا آن را واکنش گرا کنید. با استفاده از پرسش های رسانه ای، می توانید طرح بندی محتوای خود را بر اساس اندازه پنجره یا صفحه نمایش دستگاه کاربر تغییر دهید.

آنچه را پوشش داده ایم

  • تنظیم نمای بصری
  • فلکس باکس
  • پرسش های رسانه ای

منابع

درباره اصول طراحی واکنشگرا بیشتر بدانید

درباره Flexbox به عنوان یک پیشرفت پیشرونده بیشتر بدانید

درباره کتابخانه‌های CSS واکنش‌گرا بیاموزید

درباره استفاده از پرسش های رسانه ای بیشتر بیاموزید

برای مشاهده تمامی کدهای دوره آموزشی PWA به کدلبورد خوش آمدگویی دوره مراجعه کنید/