Giriş
(5)

responsive css import

vadrigar
soru başlıktan da anlaşılacağı üzere ufak bir soru:@media only screen and (min-width: 1024px) {@import url('layout/min_1024.css');}@media only screen and (min-width: 768px) and (max-width: 1023px) {@import url('layout/min_768.css');}@media only screen and (min-width: 480px) and (max-width: 767px) {@
soru başlıktan da anlaşılacağı üzere ufak bir soru:
@media only screen and (min-width: 1024px) {@import url('layout/min_1024.css');}
@media only screen and (min-width: 768px) and (max-width: 1023px) {@import url('layout/min_768.css');}
@media only screen and (min-width: 480px) and (max-width: 767px) {@import url('layout/min_480.css');}
@media only screen and (max-width: 479px) {@import url('layout/min.css');}

şu yazılan şeyin çalışması için ne yapılması gerekiyor ?

her ekran boyuduna göre ayrı bir css dosyası yaratıp o şekilde biraz daha temiz çalışmak istiyorum ama nasıl olacak çözemedim bir türlü.
0
vadrigar
 (21.07.14)
Tüm css dosyalarını tek css dosyasına import et diyeceğim ama css dosyasına css dosyası import edilmiyordu sanki. Ama olabilir de bir aralar bakmıştım ama çok araştırmadım. Ben Hepsini tek dosyada büyükten küçüğe göre yazıyorum.
0
mylord
 (22.07.14)
öyle karısıklık olsun istemiyorum.
ayrı ayrı olsun istiyorum.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$(function(){
if($(window).width() > 1024)
{
$('#layout_file').attr('href', 'layout/min_1024.css');
}
else if($(window).width() > 768)
{
$('#layout_file').attr('href', 'layout/min_768.css');
}
else if($(window).width() > 480)
{
$('#layout_file').attr('href', 'layout/min_480.css');
}
else if($(window).width() < 481)
{
$('#layout_file').attr('href', 'layout/min.css');
}
});
});
</script> şöyle bir çözüm buldum. çalışıyor ama. browserı tutup küçültünce calısmıyor. küçülttükten sonra f5 yaparsam calısıyor. gerçi kullanıcı nerden girerse girsin calısıyor sonucta ilk yüklendiginde.
0
🌸vadrigar
 (22.07.14)
Tek css dosyasında birden fazla çözünürlüğü destekleyen kodlar yaz. CSS içerisine bir css daha include ettiremezsin. CSS, içerisine bir şeyler import edilen dinamik bir doküman değildir. CSS bir şeylerin içerisine monte olur.

@vadrigar:

Senin kodun f5 bağımsız çalışması için başındaki document.ready fonksiyonunu kaldırman gerek yani şöyle:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(function(){
if($(window).width() > 1024)
{
$('#layout_file').attr('href', 'layout/min_1024.css');
}
else if($(window).width() > 768)
{
$('#layout_file').attr('href', 'layout/min_768.css');
}
else if($(window).width() > 480)
{
$('#layout_file').attr('href', 'layout/min_480.css');
}
else if($(window).width() < 481)
{
$('#layout_file').attr('href', 'layout/min.css');
}
});

</script>
0
pass
 (22.07.14)
css ile yapilabilecek sey icin javascripte basvurmayin.

media query'leri html'de css dosyalarini yuklerken kullanin.

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 980px)" href="styles/tablet.css"/>
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 660px)" href="styles/mobile.css"/>

gibi mesela. css dosyalarinda baska query veya import vs. eklemenize gerek yok.
0
archvile
 (22.07.14)
işlemi js ile yaparken direkt $(function(){} diye başlamayıp $(window ).resize(function() {} yaparsan, pencereyi yeniden boyutlandırırsan düzgün çalışır.

api.jquery.com
0
zam sampiyonu domates
 (22.07.14)
Kategoriler
duyuru (0)
soru (25)
müzik (1)
film/dizi (0)
teknik (3)
medikal (0)
sözlük (1)
yabancı dil (0)
yer/yön (0)
alınık/satılık (3)
gönül işleri (2)
hayvan (0)
kayıp (0)
kan aranıyor (0)
ev/kalacak yer (0)
Son Cevaplananlar
getir
istatistikler
yardım / hakkında
buraya yazılanların hakları Sir Anthony Hopkins'e aittir.
yazan eden compumaster, ilgilenen eden fader
modere edenler basond, compumaster, fraise, kibritsuyu, rakicandir
bu sitede yazılanların hiçbiri doğru değildir. site içeriği küçükler için sakıncalı olabilir. yazılardan yazarları sorumludur. kaynak göstermeden alıntılanamaz. devlet tarafından atanmış bir kurumun internet üzerinde kimin hangi bilgiye ulaşıp ulaşamayacağına karar vermesi insan haklarına aykırıdır. web siteleri kullanıcıların istekleri doğrultusunda bağlandıkları yerlerdir. kullanıcılar isterlerse bir web sitesine bağlanmayabilirler. bu güçleri ve imkanları mevcuttur. bir kullanıcı bir siteye bağlanmak istiyorsa bu onun tercihi ve hakkıdır. bağlanmak istemiyorsa bu yine onun tercihi ve hakkıdır. halkın kendisine hizmet etmesi için görevlendirdiği kurumlar hadlerini aşıp halka neye ulaşıp ulaşmayacağını bilmeyen cahil cühela muamelesi edemezler. ebeveynlerin çocuklarını sakıncalı içeriklerden koruması için çok sayıda bedava ve ücretli yazılım mevcuttur. bu yazılımlar bir web tarayıcısını kullanmaktan daha karmaşık teknik bilgi gerektirmemektedir. devletin milletini küçük düşürmesi ve ebleh yerine koyması yasaktır.