طراحی سایت واکنش گرا
سلام دوستان itpro من خوبید؟
من با css و @media یه سایت واکنش گرا ساختم ولی اجرا نمیشه یعنی میشه یکی در میون کدهاش عمل میکنه
بعضی کداش تو موزیلاش عمل نمیکنه تو اکسپلوره عمل میکنه
کدهای سایت http://www.w3schools.com اجرا میکنم تو موزیلا جواب میده همون کد و کپی میکنم تو سایت جواب نمیده
کلافم کرده چه کنم دوستان؟
10 پاسخ
احتمالا شما تگ meta viewport رو به سایتتون اضافه نکردید که تو موبایل ورست نشون نمیده.
چک کن ببین اول صفحه تو بخش Head کد meta viewport و نوشتی یا نه؟
توی کد های Css هر قسمت که اجرا نمیشه webkit را فراخوانی کن البته برای تمامی مرورگرها
نه منظورم اینه که اندازه مدیا کوئری رو باید اندازه های خاصی باشه یا با توجه به سایت میتونه اندازه ها متفاوت باشه؟
چون من یه مدیا کوئری نوشتم با موزیلا که از قسمت ریسپانسیو سایت رو مشاهده میکنم درست نشون میده ولی با گوشی این تغییرات نشان داده نمیشه و ریسپانسیو نمیشه
مشکل از کجاست؟
ممنون
برای طراحی ریسپانسیو بیشتر از % برای اندازه ها استفاده می کنند، بعضی جاها از vw و برای فونت ها هم از em. البته بعضی جاها هم هست که از px استفاده می کنند. بستگی به وضعیت المان و نوع طراحی شما داره.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<style>
body {
background-color: lightgreen;
}
@media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
این کد بدون تگ و با تگ تو اینترنت اکسپلوره کار میکنه
ولی حتی با تگ هم تو موزیلا نه
تو media query سایز و از 300 به 320 تغییر بده کار میکنه. ظاهراً firefox حداقل سایز صفحه 320 و کوچیکتر نمیشه.
مطلب زیر رو بخون در مورد سایز صفحه ها به صورت کامل توضیح داده:
اقا دستت درد نکنه خیلی ممنون
درست شد
این سایز های استاندارد رو میشه بهم بگی؟
یک سوال
هنگام ریسپانسیو کردن سایت حتما باید از اندازه مشخص استفاده کرد یا با توجه به سایت و المان های آن متفاوت می باشد؟