یکی از بهترین راه های طراحی سایت ریسپانسیو به کمک HTML و CSS3 است. چرا که همانطور که گفته شد، CSS و HTML پایه های اصلی کدنویسی و در کل طراحی سایت هستند.
مراحل طراحی سایت ریسپانسیو به کمک HTML و CSS3
- LAYOUT : هنگام طراحی سایت ریسپانسیو به کمک CSS3 و HTML اولین عنصری که باید به آن توجه شود LAYOUT است . بطور کلی به ساختار و پیکربندی یک سایت layout گفته میشود. بهترین راه برای طراحی سایت ریسپانسیو به کمک CSS3 و HTML ، این است که در مرحله ی اول یک سایت غیر ریسپانسیو طراحی شود. منظور از غیر ریسپانسیو، FIX بودن Layout میباشد. حال زمان آن رسیده است که المان های ریسپانسیو کننده ی سایت را اضافه کنید. در تگ head متاتگ های Viewport و http-equiv و در آخر handheldfriendly را اضافه می کنیم.
- مدیا ها : قدم بعدی در طراحی سایت ریسپانسیو به کمک CSS3 و HTML قرار دادن عناصر مدیا و ریسپانسیو کردن آنها است. برای این کار می توانید در تعیین ابعاد از % استفاده کنید. به طور مثال خاصیت padding یک عکس همیشه نمیتواند ثابت باشد. گاهی نیاز است که این خاصیت نسبت به اندازه ی صفحه تغییر کند. بنابراین در طراحی سایت ریسپانسیو به کمک CSS3 و HTML به جای px میتوان از % استفاده کرد تا با تغییر اندازه ی صفحه نمایشگر padding داده شده حفظ شود. این کار در تعیین سایز عناصر بصری نیز بسیار مهم است.
- تایپوگرافی : منظور از تایپوگرافی در طراحی سایت ریسپانسیو به کمک CSS3 و HTML در واقع تمامی خصوصیت های مربوط به نوشته ها در سایت میباشد. متاسفانه بسیاری از طراحان اهمیت این موضوع را نادیده میگیرند. در طراحی سایت ریسپانسیو به کمک CSS و HTML میتوان برای این کار از خاصیت rem استفاده کرد. rem مشابه em میباشد با این تفاوت که این خاصیت مستقیم به خاصیت html متصل است. منظور از خاصیت html طور مثال استفاده از html { font-size:100%; } است.
متن قبل: ریسپانسیو بودن در طراحی سایت
- ۹۶/۰۸/۰۶