[]
responsive css import
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ü.
@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ü.
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.
- mylord (22.07.14 00:06:34)
ö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.
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.
- vadrigar (22.07.14 00:19:44)
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>
@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>
- pass (22.07.14 01:18:09)
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.
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.
- archvile (22.07.14 03:33:28)
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
api.jquery.com
- zam sampiyonu domates (22.07.14 08:20:02 ~ 08:20:17)
1