رسپانسیو قالب سایت

[iranian-portal]

این کدها درسته واسه مدیا?

دوست گرانقدر ، بین کلیه اتفاقات و دستوراتی که در طراحی وب استفاده میشه یک رابطه منطقی و منظمی وجود داره ؛

کدنویسی به خصوص در بخش استایل یا css ترفندهای متنوع و قابل درکی داره ، کد زیر :

/* Smaller screens */


@media only screen and (max-width: 1023px) {
    /* Enter Your Custom Styles Here */    
}




/* Mobile */


@media handheld, only screen and (max-width: 767px) {
    /* Enter Your Custom Styles Here */    
}




@media only screen and (max-width : 480px) {  
    /* Enter Your Custom Styles Here */      
} 


@media only screen and (max-width : 320px) {  
    /* Enter Your Custom Styles Here */    
}

توضیحات به زبان انگلیسی خودش گویای مطلب هست ؛ ترجمه به فارسی:

در بخش اول استایل هایی که باید برای صفحه نمایش با حداکثر عرض 1023 پیکسل هستند تعریف کنید ، مثلا:

body{width:80%;margin:0 auto}
.div1 .div2{width:91.35%}

مشخص می کنید مثلا عرض بدنه 80 درصد کل باشه یا دایو1 و دایو2 چه وضعیتی داشته باشند/

==================

همین اتفاق به ترتیب تکرار میشه برای حداکثر عرض صفحه نمایش 767 پیکسل ، 480 پیکسل ، 320 پیکسل

در نهایت باید آدرس فایلی css ، که این دستورات را در آن ثبت کردید ، فراخوانی کنید:

<link rel="stylesheet" href="css/responsive.css" type="text/css" media="all" />

فقط کافیه کمی در ساختار کدها دقت کنید ، خودتون متوجه دستوراتی که باید بدید خواهید شد.