نیاز به کمک در CSS [بایگانی]

amir6771

دوشنبه 02 شهریور 1394, 23:43 عصر

سلام دوستان

من برای اندروید برنامه نویسی میکنم اما به زبان html و استفاده از Jquery و Jquerymobile و Css . والان به یک مشکلی در طراحی صفحات برنامه ام برخوردم. اونم اینکه وقتی صفحات html برنامه رو در دستگاه های مختلف اجرا میکنم ،اندازه صفحه، یعنی عرض و ارتفاعش ثابت میمونه درحالیکه من میخوام باتوجه به سایز صفحه اون دستگاه(صفحه 4 اینچی یا 5 اینچی یا صفحه تبلت) طول و عرض صفحه هم متناسب با اون کم و زیاد بشه... یعنی و width و hight صفحه حد اکثر سایزی باشه که تو اون دستگاه میشه نشون داد(به عبارتی صفحه به اندازه سایز صفحه دستگاه کش بیاد!)...

برای اینکار از چه دستوری در css باید استفاده کنم؟

Keramatifar

سه شنبه 03 شهریور 1394, 01:37 صبح

دوست عزیز
کاری که شما می خواهید انجام بدهید در تئوری "طراحی Responsive" و برگردان فارسی آن "طراحی واکنشگرا" نامیده می شود
برای اینکار شما باید در html خود در المنت HEAD یک متا بصورت زیر قرار بدید:

<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
سپس در CSS با استفاده از دستور @media برای سایزهای مختلف تغییرات را اعمال کنید
مثال:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

بوق بوق

سه شنبه 03 شهریور 1394, 08:46 صبح

سلام دوستان

من برای اندروید برنامه نویسی میکنم اما به زبان html و استفاده از Jquery و Jquerymobile و Css . والان به یک مشکلی در طراحی صفحات برنامه ام برخوردم. اونم اینکه وقتی صفحات html برنامه رو در دستگاه های مختلف اجرا میکنم ،اندازه صفحه، یعنی عرض و ارتفاعش ثابت میمونه درحالیکه من میخوام باتوجه به سایز صفحه اون دستگاه(صفحه 4 اینچی یا 5 اینچی یا صفحه تبلت) طول و عرض صفحه هم متناسب با اون کم و زیاد بشه... یعنی و width و hight صفحه حد اکثر سایزی باشه که تو اون دستگاه میشه نشون داد(به عبارتی صفحه به اندازه سایز صفحه دستگاه کش بیاد!)...

برای اینکار از چه دستوری در css باید استفاده کنم؟

برای اینکار دو راه وجود داره:
1. در داخل کد های css، خودتون دستی کنترل کنید که برای اینکه بفهمید چطور این کار رو کنید، به این لینک مراجعه کنید.
http://www.w3schools.com/css/css_rwd_grid.asp
2. می تونید از کتابخانه Bootstrap که خودش responsive هست استفاده کنید. برای آشنایی با Bootstrap هم به این لینک مراجعه کنید.
http://www.w3schools.com/bootstrap/default.asp
موفق باشید.

amir6771

سه شنبه 03 شهریور 1394, 11:16 صبح

دوست عزیز
کاری که شما می خواهید انجام بدهید در تئوری "طراحی Responsive" و برگردان فارسی آن "طراحی واکنشگرا" نامیده می شود
برای اینکار شما باید در html خود در المنت HEAD یک متا بصورت زیر قرار بدید:

<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
سپس در CSS با استفاده از دستور @media برای سایزهای مختلف تغییرات را اعمال کنید
مثال:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

يعني تو اين دستور بايد سايز تمام صفحه نمايش هايي كه قرار هست اپليكيشن تو اونها اجرا بشه رو بدونم و تك تكشون رو قيد كنم تو دستور؟

amir6771

سه شنبه 03 شهریور 1394, 11:17 صبح

برای اینکار دو راه وجود داره:
1. در داخل کد های css، خودتون دستی کنترل کنید که برای اینکه بفهمید چطور این کار رو کنید، به این لینک مراجعه کنید.
http://www.w3schools.com/css/css_rwd_grid.asp
2. می تونید از کتابخانه Bootstrap که خودش responsive هست استفاده کنید. برای آشنایی با Bootstrap هم به این لینک مراجعه کنید.
http://www.w3schools.com/bootstrap/default.asp
موفق باشید.

راستش من تو css واقعا آماتورم ! سر دنياوردم از اون لينك :ناراحت:

بوق بوق

سه شنبه 03 شهریور 1394, 14:32 عصر

راستش من تو css واقعا آماتورم ! سر دنياوردم از اون لينك :ناراحت:
فکر نمی کنم بدون اطلاعات کافی در مورد css بتونید این مشکل رو رفع کنید.