Ekran boyutuna göre tasarım

Merhabalar html/css kullanarak web sitesi yapiyorum kendimi geliştirmek icin ama aklıma takıaln smdi bunu kendı bilgisayarımın ekranına göre ayarlayıorum ama ekran değiştrince sitemin görünümü bozuluyor sıgmıyor vb sorunlarla karsılasyıroum cözum nedir bunun

https://i.hizliresim.com/Vp7LNo.png

- Responsive framework kullanmak (Bootsrapt vs.)
- Sabit pixel değer vermek yerine flex yapısına uygun tasarım yapmak. em, vh, % değerleri kullanmak.

Hangisini isterseniz onu kullanın.

öncelıkle cevabnız icn teşekkur ediyorum css pozisoyn belirlemek icin

position: relative;
left: 230px;
top: 0px;

bu kodu kullanıyorum

Bootsrapt ögrenemedım cok zor geldi baana

Tasarımda kullanacağın çerçevelere yüzdelik genişlik ver. Mesela bütün herşeyin içinde olduğu çerçeveyi (div) width: 100%; olarak ayarla. Bu şekilde her ekrana göre uyarlayabilirsin. İç bölümleri de yine buna göre yüzde olarak belirle. Content dediğimiz içerik kısmını 69% olarak, sidebar kısmını da 30% olarak belirlersen tasarımda sorun çıkmaz. Sidebarı sağda veya solda kullanacaksan ona göre içerik kısmını float:left yada float:right olarak belirlersin, aynı şekilde sidebarı da ayarlarsın. Sağdaki sağa yapışacak şekilde soldaki de sola yapışacak şekilde durur böylelikle.

Bunların dışında geniş ekranlı cihazlar ve mobil cihazlara da bir uyarlama yapman gerekiyor. Genellikle tasarımcılar geniş ekranlı cihazlarda sorun çıkmaması için maks-width özelliğini kullanırlar. max-width:1200px yapan da var max-width:1300 yapan da var. Mobil cihazlar için de min-width değeri belirlemen gerekiyor. Onun da min-width:300px olması gerek.

Çerçeve genişliklerini bitirdikten sonra geriye çerçeve içine ekleyeceğin görsellerin genişlik ayarlamaları kalıyor. Görselleri de yine 100% olarak ayarlayabilirsin. Kullanacağın border ve padding değerlerine göre de yüzdelikler ile oynaman gerek. Bunlardan sonra mobil ve tablet genişliklerine göre ayrı bir css kodu eklemen ile tasarımın tamamlanmış olur.

Olayı baştan sona aşama aşama anlatmak baya uzun sürer. Temel mantık bu şekildedir. Gerisini de kendine göre bölüm bölüm uyarlaman gerekiyor.

Bootstrap neden zor geliyor ki sana ? Eğer bu şekilde düşünüyorsan CSS Stillerini ve HTML şablonlarının mantığını iyi kavrayamamışsın. Beni yanlış anlama, bu bir eleştiri sadece. Bence CSS ve HTML'in üzerine yoğunlaş. Sonra bootstrap'a yönel. CSS yazım biçimleri var mesela SASS ya da LESS gibi. Mesela LESS yaz. SASS'a göre daha iyi. Koala editörü var yazdığın kodu derleyen. Araştır bunları. Belki de bootstrap gibi kendi kütüphaneni oluşturursun. Mesela şöyle de düşünebilirsin ilham almak açısından; Çok iyi bir back-end'ci olamayabilirsin. Ama süper bir front-end'ci olabilirsin. Ya da çok mükemmel bir sistem uzmanı olabilirsin. Bu eleştirel yazıda bir çok kelimede araştırma yaparsan bence kendi yolunu seçersin.

Bootstrap mantıgını anlayamadım desem daha güzel olurdu sanrıım html - css biliyorum bootstrap ögreniyim diye bi tandıgımın yanına da gttm ama aklıma yatmadı

Burada aklıma yatmadı diye bir durum yok. Dünya üzerinde milyonlarca kişinin aklına yatan ve müthiş bir kolaylık sağlayan framework'e alışmak yerine "aklıma yatmadı" diyip kullanmazsan, zaten istediğin kadar kendini geliştir sektörede tutunamazsın. Bu sadece Bootstrap için değil, diğer CSS framework'leri içinde geçerli.

Yapmak istediğin şeyi tek tek ayarlamak zor geliyorsa, en kolay yolu bir CSS framework kullanmak. Bootstrap en iyi alternetif. Beğenmezsen BulmaCSS öneririm.

önerdiğin bişey varmi peki ? bottstrap ögrenicem ögrenmeye calısıcam mesela smdi navbar menu eklıyorum ama menudekı yazıları nasıl boyut yukseltıcem mesela ? bunları anlatan bi videodur falan önerdiğin

Ayrı bir css yazıp bootstrap'ın stillerini ezebilirsin. "!important" bu özellik dayatma parameresini araştır. Font-size ile yazıyı büyütebilirsin. Bence css üzerine bir daha düşün derim biliyorum diyorsun ama gerçekten bilmen gerekiyor.