HTML5 - Boyutlandırma

gibi web tarayıcıları Firefox, Chrome, Safari, Opera vb.. Hepsi sayfanın akışına ve düzenine bağlı olarak öğelerin nasıl yeniden boyutlandırılacağına ilişkin kuralları izleyinBu kurallar belki çok ayrıntılı olabilir, ancak boyutların her zaman onlardan istediklerimizle orantılı kalması için öğelerin nasıl ele alınması gerektiğini belirtmemize izin veren şeydir.
Boyut özellikleri
Tarayıcıya öğelerimizi nasıl yorumlaması gerektiğini söylememize izin veren bazı boyut özellikleri vardır, uygulamalarına gitmeden önce bunların bir listesini görelim:
En boy: Bir elemanın genişliğini ve yüksekliğini yapılandırırlar, alabileceği değerler şunlardır: auto ve.
min genişlik / min yükseklik: Bir eleman için minimum genişlik veya yükseklik belirlememizi sağlar, alabileceği değerler şunlardır: auto ve
maksimum genişlik / maksimum yükseklik: Bir öğe için kabul edilebilir maksimum yüksekliği veya genişliği ayarlar, olası değerleri şunlardır: auto ve
kutu boyutu: Boyut için eleman kutusunun hangi bölümünün alındığını belirler, mevcut olanlar: içerik kutusu dolgu kutusu kenarlık kutusu kenar kutusu.
Görüntülenen özelliklere herhangi bir değer ayarlamazsanız, varsayılan değer şu olacaktır: auto, belirtilmemiş olsa bile, yani boyutları ayarlayan tarayıcı olacaktır, ayrıca gördüğümüz gibi boyutları kullanarak boyutları ayarlayabiliriz. uzunluk ölçümleri veya yüzdeler, yüzdeler kap öğesinin genişliğine göre hesaplanır.
Teoriyi gördükten sonra şimdi uygulamaya geçeceğiz, tüm bunların nasıl çalıştığını görebilmemiz için iki öğenin boyutunu ayarlayacağımız aşağıdaki kodu görelim:

 Örnek 

Gördüğümüz gibi burada yaptığımız çok basit, sayfanın div elemanı için bir genişlik ve yükseklik belirledik, sonra her birini farklı bir yere yerleştirdiğimiz iki tanımlayıcı belirledik. kutu boyutuTüm bunların bizim için ne ürettiğini görelim:

Gördüğümüz gibi, görüntülerden biri orantısını kaybediyor ve diğeri onu bozuk göstermeyecek bir boyutta kalıyor.
Şimdi tarayıcı penceresinin boyutunu yeniden boyutlandırma ile biraz oynarsak ne olur, div'in kabının boyutunun %75'i olacağını biliyoruz, bu durumda kabı, pencereyle birlikte değişen gövdedir ve sırayla seçici ile görüntü #ilk Bu durumda div olan kabının genişliğinin %50'sidir, bunu gördüğümüzde bir şeyin olduğu gibi tutulmayacağını biliyoruz, bakalım tüm bunlarla tarayıcıda ne olacak.

BÜYÜT

Oranlar, yüzde değerlerinin kullanılması nedeniyle değişir, şimdi bazı boyut kurallarını belirlediğimizde tarayıcının öğelere nasıl davrandığını görebiliriz. Bununla öğreticimizi bitiriyoruz, şimdi tarayıcının belgelerimizdeki öğelerin yeniden boyutlandırmasını ve boyutlarını istediğimiz gibi ele almasını sağlayana kadar pratik yapmamız gerekiyor. HTML5.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.