Responsive tasarım yaparak sitenize giren kullanıcıların ekran çözünürlüklerine göre daha kullanışlı bir tasarım yapabilirsiniz. Her ekran çözünürlüğünde sitenizin görüntüsünün bozulmasını istemiyorsanız responsive tasarım kullanmalısınız. Responsive tasarım ile sitenize cep telefonu ya da mobil cihazından giren kullanıcılarında daha rahat sitenizde gezmesine yardımcı olursunuz.
Responsive tasarım yapmak için hazır kütüphane şeklinde tasarımlar mevcut, isterseniz bunlardan bir tanesini kullanarak kolayca bir tasarım yapabilirsiniz. Bootstrap bunlardan bir tanesidir.
Responsive tasarım yaparken css dosyanızda tasarımınızın bozulmaması için belirli çözünürlükleri belirleyerek onlarda özelliklerinde değişiklik yapabilirsiniz.
Öncelikle sayfanızın head etiketleri arasına aşağıdaki kodu eklemelisiniz.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
Ardından css dosyanıza örnekteki gibi kodları artırıp kullanabilirsiniz.
@media only screen and (min-width: 960px) { /* Çözünürlüğü en az 960px ise */ }@media only screen and (min-width: 400px) and (max-width: 600px) { /* Çözünürlüğü 400px – 600px arasındaysa */ }@media only screen and (max-width: 800px) { /* Çözünürlüğü en fazla 800px ise */ }Bu şekilde kodlarınızı kritik çözünürlüklerinize göre artırarak özellikleri değiştirmelisiniz. Örnek olarak 700px altında sağ menüyü gizleyebilirsiniz.
merhabalar, bir konuda çok acil yardıma ihtiyacım var.
Vb.net ile bir otomasyon tasarlıyorum. Bunu responsive hale getirmem gerekiyor fakat css i buna nasıl entegre ederim bilmiyorum.
Yardımcı olursanız çok mutlu olurum.
Merhaba,
Eğer VB.NET ile tasarladığınız proje bir masaüstü uygulaması ise ona CSS entegre edemezsiniz. Fakat ASP.NET bir proje geliştiriyorsanız onun içerisine aşağıdaki kod ile CSS dosyanızı ekleyebilirsiniz.
<link rel="stylesheet" type="text/css" href="CSSDOSYANIZ.css" />