آموزش مختصر ریسپانسیو کردن قالب
سفارش تبليغات در انجــمن قالب گراف ورود به تاپيک اطلاعيه هاي تابستانه قالب گراف
امور گرافيکي و کدنويسي وب خود را به جي جي ميزبان بسپاريد
نام کاربري : پسورد : فراموش
آموزش مختصر ریسپانسیو کردن قالببازديد : 1350
پيام خصوصي نقل قول تشکر کنيد

سلام به همه بچه های گل قالب گراف.

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

اول از همه این رو تو بزارید:

کد:
<meta name="viewport" content="width=480, initial-scale=1, maximum-scale=2">

خب تا حالا 50% کار طی شده

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

کد:
@media only screen and (max-width: 740px) { }

@media only screen and (max-width: 570px) { }

@media only screen and (max-width: 480px) { }

@media only screen and (max-width: 320px) { }

در کد بالا اندازه رزولوشن های رایج رو نوشتم. خب در کد بالا مثلا تو اولین خط کد نوشته max-width: 740px و حال شما باید واسه رزولوشن هایی که رزولوشن انها 570 تا 740 هستش استایل جدید بدید.

به طور مثال اگه هدر شما طولش رو 740 پیکسل در نظر گرفتید در بین {} بهش طول 100% بدید وارتفاعش رو بیشتر کنید.

مثال:

کد:
@media only screen and (max-width: 740px) {

.header{width:100%;}

}

@media only screen and (max-width: 570px) { }

@media only screen and (max-width: 480px) { }

@media only screen and (max-width: 320px) { }

همونطور که دیدید کدنوشتن داخلش هیچ فرقی نداره فقط کدتون رو مثل همیشه داخل {} بنویسید

و تو دومین خط نوشته max-width: 570px شما باید داخل {} استایل جدید برای رزولوشن های بین 570 و 480 بدید و تو سومین خط نوشته max-width: 480px شما باید واسه رزولوشن هایی که اندازهشون بین 480 پیکسل و 320 پیکسل هست رو داخل {} استایل جدید بدید و تو اخرین خط نوشته max-width: 320px و شما واسه رزولوشن های زیر 320 پیکسل داخل {} استایل جدا بدید.

این یک نمونه کد هستش:

کد:
.min{width:800px;height:auto;margin:auto;direction:rtl;}

@media only screen and (max-width: 740px) {

.min { width:100%;}

.header{width:100%;}

}

@media only screen and (max-width: 570px) {

.min { width:100%;}

.header{width:100%;}

}

@media only screen and (max-width: 480px) {

.min { width:100%;}

.header{width:100%;}

}

@media only screen and (max-width: 320px) {

.min { width:100%;}

.header{width:100%;}

}

این هم یک کد ریسپانسیو فوق ساده ساختم برای درک بهتر

کد:
<html>

<head>

<meta charset="utf-8">

<style>

@charset "utf-8";

.min{width:800px;height:auto;margin:auto;direction:rtl;}

@media only screen and (max-width: 740px) {

.min { width:100%;}

.header{width:100%;}

}

@media only screen and (max-width: 570px) {

.min { width:100%;}

.header{width:100%;}

}

@media only screen and (max-width: 480px) {

.min { width:100%;}

.header{width:100%;}

}

@media only screen and (max-width: 320px) {

.min { width:100%;}

.header{width:100%;}

}

.header{

width:800px;

height:100px;

background-color:#000}

p{color:#FFF;

margin-right:5PX;}

.header .logo{float:right;

width:100px;

height:100px;}

.header .benner{float:left;

margin-left:20px;

margin-top:20px;}

.vasat{width:380px;

margin:auto;

background-color:#000}

@media only screen and (max-width: 800px) {.min { width:100%;}

.header{width:100%;}

}

@media only screen and (max-width: 603px) {.min { width:100%;}

.header{width:100%; height:200px;}.header .benner { max-width:100%;}.vasat{width:100%;

}

</style>

</head>

<body>

<div class="min">

<div class="header">

<img class="logo" src="http://up.ghalebgraph.ir/up/galebgraph/webfile/web/theme/04/images/logo.png">

<img src="http://up.ghalebgraph.ir/up/galebgraph/file/1394/09/myapk.gif" class="benner">

</div>

<div class="vasat">

<p>ا حمد و سپاس به درگاه خداوند متعال و با عرض تبريك و تهنيت به خواهران و برادران عزيزي كه در آزمون سراسري سال 1394 پذيرفته ‌شده و آماده گام نهادن به عرصه وسيع علم‌اندوزي و خدمت به مردم شريف ميهن‌مان مي‌شوند، بدين‌وسيله به اطلاع مي‌رساند اسامي پذيرفته‌شدگان نهايي رشته‌هاي مختلف تحصيلي دوره‌هاي روزانه،‌ نوبت‌دوم ‌(شبانه)، دانشگاه ‌پيام‌نور، پرديس‌هاي دانشگاه فرهنگيان، دانشگاه تربيت دبير شهيد رجايي، موسسات غيرانتفاعي و غيردولتي، رشته‌هاي تحصيلي مجازي و پرديس خودگردان دانشگاه‌ها و مؤسسات آموزش عالي كشور و همچنين اسامي پذيرفته شدگان مرحله پذيرش صرفاً براساس سوابق تحصيلي براي دانشگاه‌ها، موسسات آموزش عالي غيرانتفاعي و غيردولتي، دانشگاه پيام‌نور و دوره‌هاي مجازي درسال تحصيلي 95-1394 كه ‌گزينش‌ آنها به ‌روش‌متمركز صورت‌ گرفته ‌است، بر روي ‌سايت ‌سازمان ‌سنجش ‌آموزش‌ كشور به ‌نشاني: www.sanjesh.org قرار گرفته است كه كليه پذيرفته‌شدگان مي‌بايست با توجه به موارد ذيل با در دست داشتن مدارك اعلام شده براي ثبت‌نام در دانشگاهها و موسسات آموزش عالي محل قبولي مراجعه نمايند.</p>

</div>

<br>

</div>

</body>

</html>

کسایی که با css اشنایی ندارن حتما دچار مشکل می شن.

موفق و پیروز باشید.

امضاي کاربر :

طراحی و ترجمه قالب - طراحی فایل گرافیکی
وب سایت : www.rightheme.ir
تلگرام : rightheme
ایمیل: rightheme.ir@gmail.com

تشکر شده:

7 کاربر از adminrightheme به خاطر اين مطلب مفيد تشکر کرده اند: mahdio77 / warrior / ehsan / whatyouknow / vcode / mattin / sina1515 /

پاسخ ها
پاسخ : 2 RE آموزش مختصر ریسپانسیو کردن قالب
پيام خصوصي نقل قول تشکر کنيد

خیلی مناسب و مفید.واقعا می شه درکی از چگونگی کدنویسی ریسپانسیو داشت.
امضاي کاربر :




ایده های مذهبی و فرهنگی شما را اجرا می کنیم .
+ www.yargomnam.ir
پاسخ : 5 RE آموزش مختصر ریسپانسیو کردن قالب
پيام خصوصي نقل قول تشکر کنيد

نقل قول از vcode

دستت مرسی

جمل از قواعد کاربردی زبان فارسی اطاعت نمیکنه
امضاي کاربر :

طراحی و ترجمه قالب - طراحی فایل گرافیکی
وب سایت : www.rightheme.ir
تلگرام : rightheme
ایمیل: rightheme.ir@gmail.com

تشکر شده:

1 کاربر از adminrightheme به خاطر اين مطلب مفيد تشکر کرده اند: anti-virus /

پاسخ : 7 RE آموزش مختصر ریسپانسیو کردن قالب
پيام خصوصي نقل قول تشکر کنيد

خوبه اما کامل توضیح ندادی مثلا خاصیت

کد:
float
هم در رسپانسیو کاربرد داره اون هم زیاد

امضاي کاربر :
savalan دوستی که هیچ موقع فراموش نمیشود!!
پاسخ : 8 RE آموزش مختصر ریسپانسیو کردن قالب
پيام خصوصي نقل قول تشکر کنيد

من مشکلم اینه هیچ چیز رو نمیتونم به یکی بفهمونم
امضاي کاربر :

طراحی و ترجمه قالب - طراحی فایل گرافیکی
وب سایت : www.rightheme.ir
تلگرام : rightheme
ایمیل: rightheme.ir@gmail.com
پاسخ : 9 RE آموزش مختصر ریسپانسیو کردن قالب
پيام خصوصي نقل قول تشکر کنيد

اوه،نایس

تنکیو وری ماچ
امضاي کاربر :
☀ شـــاد *بـــاشیــــن . . . شاید فــــردا نبـــاشین ☀



پاسخ : 10 RE آموزش مختصر ریسپانسیو کردن قالب
پيام خصوصي نقل قول تشکر کنيد

با سلام به تمام خوانندگان عزیز,

من سید احمد حسینی(مدیر اسکینک و شیراز وب هاست) زاده شده از یکی روستاهای شیراز هستم.

(نام واقعی من = چس احمق کله گوسفندی)

من به دلیل اینکه در کودکی زیاد مورد تجاوز و فهش به ناموسم قرار گرفتم,

الان در این سن عادت کرده ام به دیگران توهین و فحش به ناموسشون بدم.

خواستم این متن رو بنویسم و بگم که از دست من ناراحت نشوید زیرا مشکل بی ناموسی و احمق بودن در من طبیعی است.

-----------------------------

شماره تماس من:

0939-349-8040هرگونه فهشی بدهید حق دارید.

-----------------------------

++باتشکر از شما++
پاسخ جديد

براي نمايش پاسخ جديد نيازي به رفرش صفحه نيست روي تازه سازي پاسخ ها کليک کنيد !
طراحي توسط احسان عزتي و کد نويسي توسط barata تمامي حقوق براي قالب گراف محفوظ است