بارگذاری چند فایل css و استفاده از یکی از آنها در resolution های مختلف

[woeful]

سلام

من یه سایت طراحی کردم که در سه رزولوشن مختلف هر کدام از یک فایل css جداگانه استفاده میکنه به این صورت که با استفاده از یک تابع جاوا اسکریت با توجه به اندازه پنجره خاصیت src تگ استایل داخل هدر رو عوض میکنم حالا مشکل اینجاست که من میخام هر سه فایل استایل من در زمان باز شدن سایت لود بشه تا دیگه در هنگام تغییر اندازه پنجره نیاز نباشه استایل جدیدی لود بشه . الان طوریه که اگه اندازه پنجره رو تغییر بدی برای چن لحظه کل سایت بهم میریزه و بعد از لود شدن استایل جدید درست میشه.

اینم سایت :‌www.hobby9.com

ممنون

[2undercover]

برای اینکار می تونید از Media Query ها استفاده بکنید:



<link rel="stylesheet" media="(min-width: 801px) and (max-width: 1000px)" href="header-medium.css">

[bestdata]

می تونید همه css ها رو یکی کنید و درون فایل css مشخص کنید که این کد ها برای چه رزلوشنی

نمونه style سایت خودم
http://seo.qalebfa.ir/wp-content/themes/evolution/home.css

دنبال @media باش متوجه کدها میشی

فقط مرورگرهای قدیمی پشتیبانی نمی کنن که می تونی برای اونا css جداگونه تعریف کنی مثل IE6

[ravand]

به نظر من اگه از جاوا اسکریپت استفاده بکنید خیلی بهتره چون اون دستورات Media Query که شما استفاده میکنی با اکسپلورر سازگار نیست.

var widthi = screen.width;
var heighti = screen.height;
با دستورات بالا راحت عرض و ارتفاع نمایشگر رو میگیری . و یه شرط میذاری . و با همه ی مرورگر ها سازگاره.

[jalil_gh]

اگه میخای media query تو ie های قدیمی هم کار کنه، یه سری کدهای آماده جاوااسکریپت هست که این قابلیت رو به اونا میده. من قبلا از یکی استفاده کرده بودم الان یادم نیست چی بود ولی از max-width و min-width پشتیبانی می‌کرد خیلی هم سریع بود.

[ravand]

اگه کدش رو داری بده ما هم استفاده کنیم من هر چی سرچ کردم گیرم نیومد. نمیدونم چرا اکسپلورر اینقدر مزخرفه. من یه قالب نوشتم با همه ی مرورگر ها سازگار بود حتی اکسپلورر ورژن های پایین 8 ولی وقتی امدم توی 9 بازش کردم دیدم قالبم هر تیکه اش یه طرف افتاد! :لبخند:

[jalil_gh]

https://github.com/scottjehl/Respond

[woeful]

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

فک کنم از همون کلمه کلیدی @media برای مرورگر های جدید و یه تابع جاوا اسکریپت به همراه چند استایل برای مرورگر های قدیمی استفاده کنم بهتر باشه

[woeful]

به نظر من اگه از جاوا اسکریپت استفاده بکنید خیلی بهتره چون اون دستورات Media Query که شما استفاده میکنی با اکسپلورر سازگار نیست.

var widthi = screen.width;
var heighti = screen.height;
با دستورات بالا راحت عرض و ارتفاع نمایشگر رو میگیری . و یه شرط میذاری . و با همه ی مرورگر ها سازگاره.

ممنون از شما دوست عزیز من همین الانم از همین روش استفاده میکنم ولی همون طور که در پست اول گفتم این روش همه فایل های css رو یک جا لود نمیکنه و در هنگام تغییر اندازه صفحه لود میکنه که اینم باعث میشه یه لحظه استایل سایت کلا بهم بریزه و اگر هم سرعت پایین باشه که کلا بهم میریزه درست هم نمیشه و اینم ینی از دست دادن بازدید

فک میکنم اگه تمام استایل های ۳ رزلوشن مختلفو داخل یه فایل css قرار بدم و با استفاده از همون کلمه media بیام بر اساس اندازه صفحه یه از یه قسمتش استفاده کنم یا ۳ استایل رو در سه فایل متفاوت قرار بدم و با استفاده از کلمه media و import این کارو انجام بدم ولی باز با مرورگر های قدیمی به مشکل میخورم که از همین روش شما استفاده میکنم. الان شما به سایت www.aparat.com برید(تبلیغ نمیکنم) با هر مرورگری اگه اندازه browser رو تغییر بدید بدون وقفه استایلش عوض میشه حتی با IE 8 ( فک نکنم دیگه ازین پایینتر استفاده بشه الان) کسی نمیدونه این سایت چطوری داره این کارو انجام میده؟

ممنون