HTML CSS ve JavaScript responsive yaparken tüm ögelere tek tek boyut belirtmek doğru mu?

Arkadaşlar bir clone videosu ile HTML CSS ve JavaScript projeleri yapıyorum. Bu son projede ki eğitimci biraz amele işi takılıyor mesela bir login sayfasında 6 adet width oluşturdu. 1100px 900px 800px 700px 500px 400px vs.

Her Media elementinde amele şekilde inputları divleri tek tek boyutlandırarak gidiyor. Çünkü başlangıçta Grid ile başladı. Öyle devam ediyor. Grid olduğu için inputlarda vs sürekli taşma yapıyor. Media 600px diyelim. Container'a 400 veriyor. İnputları 350 yapıyor falan.

Şimdi bunu sadece 700Px'de display block; padding 3RAM inputlara falan %100 verirsem. Aynı sonucu tüm boyutlarda alacak. Şimdi ben biraz acemi olduğum için merakımdan soruyorum. Tecrübeli hocalarım iş dünyasında da böyle amele işi yapılıyor mu?

Yaptığı da çok ahım şahım bir şey değil klasik login sayfası.

Not: Projenin başından beri tüm inputları tüm divleri rem ve px değerlerinde veriyor. % olarak hiç kullanmadı.

Hayır, yapmıyoruz tabii ki. Bootstrap kullanmak varken, ne uğraşacağım böyle ameleliklerle. Bunları başta öğrenmeniz işin temelini kavramanızı sağlar o kadar ki yanlış olan tarafları da var. Flexbox ile çalışıp sadece Container'a bir değer vererek iç genişlikleri de % olarak değer verirseniz daha mantıklı olur. Px vermek anlamsız ve dediğiniz gibi amelece. Fakat Bootstrap gibi bir framework ile bunlara zaten gerek kalmaz, sm, md, lg vb. classlarla işinizi halledersiniz.

Shahdee dedi:

Hayır, yapmıyoruz tabii ki. Bootstrap kullanmak varken, ne uğraşacağım böyle ameleliklerle. Bunları başta öğrenmeniz işin temelini kavramanızı sağlar o kadar ki yanlış olan tarafları da var. Flexbox ile çalışıp sadece Container'a bir değer vererek iç genişlikleri de % olarak değer verirseniz daha mantıklı olur. Px vermek anlamsız ve dediğiniz gibi amelece. Fakat Bootstrap gibi bir Framework ile bunlara zaten gerek kalmaz, sm, md, LG vb. classlarla işinizi halledersiniz.

Genişletmek için tıkla...

Size katılıyorum zaten bende genel de Flex Grid ve % ile çalışıyorum çok kolay oluyor.

Bootstrap biliyorum ancak kendimin yazması benim için daha önemli 1 2 ay içinde iş başvuruları yapmayı düşünüyorum. Şu an için JavaScript ve React bana çok zor geliyor. 1-2 ayda umarım öğrenirim.

Sadece bir login form için bu kadar uğraşılmaz. Yazılımın amacı zaten en kısa yolu kullanarak en etkili sonucu almak. Bilgisayarın yapacağı şeyleri elle yapmayın. Bootstrap gibi hazır Framework'lere yönelin, 5 dakikanızı almaz bu görüntüyü ortaya çıkartmak. Bulma ve Bootstrap kullanabilirsin.

Eğer kendin yapacaksan, yine px olarak tek tek her çözünürlüğe yetişemezsin zaten. REM kullanabilirsin sorun yok. Bir sürü cihaz var hepsine göre yazmaya kalkarsak zaten yetişemeyiz.

Ayrıca alt kısımdaki kodu da bir araştır.
<meta name="viewport" content="width=device-width, initial-scale=1.0">