طراحی نسخه ریسپانسیو سایت با استفاده از HTML و CSS

رفع مشکل ارتفاع یکسان ستون ها در طراحی وب
دی ۲۰, ۱۳۹۳
#طراحی_سایت #طراحیسایت #طراحی_وبسایت #پند #جمله #تجارت…
دی ۲۰, ۱۳۹۳

طراحی نسخه ریسپانسیو سایت با استفاده از HTML وCSS

طراحی نسخه ریسپانسیو سایت با استفاده از HTML و CSS

زمانی که قالب معمولی سایت خود را طراحی نمودید هم اکنون زمان آن می باشد که قالب سایت سازگار با رزولوشن های مختلف طراحی نمایید. برای انجام این کار کافی است ابتدا کد زیر را بین دو تگ head خود اضافه نماییم:

 <meta name=”viewport” content=”width=device-width”>

این کد به مرورگر دستور می دهد که صفحه را به اندازه پیسکل واقعی نمایش دهد. به عنوان مثال در صورتی که عرض سایت شما ۱۰۲۴ باشد سایت در کلیه مرورگرها و رزولوشن ها در همین سایز نمایش داده می شود که باعث اسکرول افقی خوردن سایت در تبلت و موبایل می شود.

سپس کافی است سه فایل CSS برای رزولوشن های مختلف طراحی نمایید و در صفحه HTML خود لینک نمایید:

<link href=”template.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-width: 1024px)” />
<link rel=”stylesheet” media=”only screen and (min-width: 0px) and (max-width: 327px)” href=”mobile.css”>
<link rel=”stylesheet” media=”only screen and (min-width:328px) and (max-width: 768px)” href=”templates/template/tablet.css”>

فایل CSS اول برای رزولوشن های بالاتر از ۱۰۲۴ که برای رزولوشن کامپیوتر و لب تاپ می باشد.

فایل CSS دوم برای نسخه موبایل وب سایت که سایز رزولوشن های ۳۲۷ به پایین می باشد.

فایل CSS سوم برای رزولوشن های صفحه مابین ۱۰۲۴ و ۳۲۷ پیکسل می باشد، که برای مرورگرهای و ابزارهای میان سایز نظیر تبلت طراحی می گردند.

برای طراحی سایت مختص به هر عرض کافی است عرض مرورگر خود را در محدوده سایز مورد نظر قرار دهید و کدهای CSS خود را به فایل مورد نظر اضافه نمایید.

* دقت نمایید هر کدی که در برای هر سایزی در فایل CSS مورد نظر درج می نمایید برای سایر سایزها مورد استفاده قرار نمی گیرد.

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

معمولا مشکل برای نمایش سایت بین عرض ۳۲۷ و ۱۰۲۴ می باشد که می توانید آن محدوده را نیز به چند فایل مختلف CSS اختصاص دهید به عنوان مثال از ۳۲۷ تا ۵۰۰، از ۵۰۰ تا ۷۰۰، از ۷۰۰ تا ۹۰۰ و از ۹۰۰ تا ۱۰۲۴٫

با استفاده از کتابخانه bootstrap می توانید پیاده سازی نسخه موبایلی سایت را بسیار راحتر انجام دهید زیرا خود این کتابخانه تغییر سایزهای المان های موجود در صفحه را به صورت خودکار انجام می دهد.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره آنلاین