نوشته اصلی توسط
hamidrez4
این کدها درسته واسه مدیا?
دوست گرانقدر ، بین کلیه اتفاقات و دستوراتی که در طراحی وب استفاده میشه یک رابطه منطقی و منظمی وجود داره ؛
کدنویسی به خصوص در بخش استایل یا 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" />
فقط کافیه کمی در ساختار کدها دقت کنید ، خودتون متوجه دستوراتی که باید بدید خواهید شد.
پاسخ : رسپانسیو قالب سایت
