PDA

View Full Version : سوال: تغییر اندازه ی تصویر در طراحی ریسپانسیو


ravand
شنبه 04 خرداد 1392, 21:53 عصر
سلام
اگه بخوایم یک سایت در نمایشگر های مختلف به یک اندازه نمایش داده بشه میگن باید از روش ریسپانسیو استفاده کرد ولی مشکل من اینه که وقتی یه تصویر کوچیک رو در نمایشگر بزرگ نمایش میدم کیفیتش میاد پایین . شنیدم توی روش ریسپانسیو میان با استفاده از ایجکس اندازه ی مورد نظر رو میدن و تصویر بزرگتری رو نمایش میدن.
نظر شما چیه؟ شما چه روشی رو پیشنهاد میدید؟
tamafi6
یک شنبه 05 خرداد 1392, 00:45 صبح
احتياجي به استفاده ازايجكس نيست فقط كافيه يك خط به استايل خودتون اضافه كنيددركدجديدكافيه ازيه تصويرباكيفيت بالاتراستفاده كنيدكه زماني رزوليشن تغييرپيداكردتصويردوم به نمايش دربياد مثل



@media only screen and(min-device-width:480px)and(max-device-width:600px){
bacground:(img.jpg);
}

كافيه ازدوياچندmedia queryاستفاده كنيدويك خط هم براي صفحات باپيكسل بالاتراستفاده كنيدويه عكس باپيكسل بالاتربه سايزموردنظراضافه كنيد
ravand
یک شنبه 05 خرداد 1392, 08:25 صبح
ما نمایشگر زیاد داریم. من چطوری قالبم رو توی چند نوع نمایشگر تست کنم؟ شما چطوری تست میکنید؟
من این دو سایت رو میشناسم ولی نمیدونم دقیق هستن یا نه؟ و از طرفی همه ی نمایشگر ها رو دارن یا نه؟
https://quirktools.com
http://viewlike.us/
متشکرم.
2undercover
یک شنبه 05 خرداد 1392, 09:07 صبح
شما اگه از Developer Tools کروم استفاده کنی خیلی کار راحت میشه!

توی Developer Tools قسمت Setting توی سربرگ Overrides و قسمت Device Metrics می تونید اندازه نمایشگر رو وارد کنید و یک نما از صفحه رو توی اون اندازه داشته باشید!
ravand
یک شنبه 05 خرداد 1392, 09:23 صبح
ورژن مرورگر کروم من رو نوشته Version 26.0.1410.64 m .
ولی همچین گزینه هایی توش نیست!
حالا این قسمتی که شما میگید اندازه ی همه ی نمایشگر ها رو نوشته ؟ یا ما باید خودمون وارد کنیم؟
چون مشکل اینجاست که من اندازه ی تمام نمایشگر ها رو ندارم.
متشکرم.
ravand
یک شنبه 05 خرداد 1392, 09:43 صبح
این کد رو من همینطوری نوشتم:

<html>
<head>
<style type="text/css">
@media screen and (min-width: 1025px) {
.res{
height:200px;
width:600px;
background-image: url('header.jpg');
color:green;
}
}
@media screen and (min-width: 600px) {
.res{
height:100px;
width:600px;
background-image: url('header2.jpg');
color:red;
}
}
</style>
</head>
<body>
<div class="res">هدر</div>
</body>
</html>
اینطوری که ازش فهمیدم برنامه میگه :
اگر حداقل اندازه ی عرض صفحه 1025px بود اون کدهایی که داخل @media screen and (min-width: 1025px) هستن رو نشون بده و اگر حداقل اندازه ی عرض صفحه 600px بود کدهایی که داخل @media screen and (min-width: 600px) هستن رو نشون بده.
درسته؟
این روشی که شما گفتید در css3 فقط کار میکنه؟
متشکرم.
ravand
یک شنبه 05 خرداد 1392, 11:08 صبح
یکی از دوستان این افزونه رو بهم معرفی کرد که خیلی خوبه: Resolution Test
http://www.joorvajoornews.com/?p=4693#
Tarragon
یک شنبه 05 خرداد 1392, 11:32 صبح
برای کروم : https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal
برای فایر فاکس :https://addons.mozilla.org/en-us/firefox/addon/firesizer/
امید وارم بدرد بخوره.
jamejam123
یک شنبه 05 خرداد 1392, 13:10 عصر
آیا آموزشی درباره طراحی رسپانسیو دارید؟