HTML ve CSS'ye duyarlı bir bölüm oluşturma

Web sitem şu anda tamamen yanıt veriyor (düzen, resimler vb.), Bir sorunla. Kodumun, nasıl yanıt vereceğinden emin olmadığım bir bölümü var. İşte ben code Cevap vermek istiyorum: fiddle HTML ve CSS'ye duyarlı bir bölüm oluşturma

Web sitesinin geri kalanı gibi yeniden boyutlandırır. Herhangi bir fikri varsa, minnettar olurum!

Alkış

HTML & CSS: Herşeyin duyarlı hale getirmek için yüzdelerini kullanmak gerekir

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'> 
<link href='//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900' rel='stylesheet' type='text/css'> 
<style> 
html 
    color: #e5e5e5; 
    text-align: center; 
    font-family: "Roboto", Helvetica, sans-serif; 
} 

body { 
    max-width: 1200px; 
    margin: 20px auto; 
    padding: 0 100px; 
    overflow-x: hidden; 
} 

.description { 
    max-width: 600px; 
    margin: 0 auto; 
    color: rgba(229, 229, 229, 0.7); 
} 

div, img, footer { 
    position: relative; 
    box-sizing: border-box; 
} 

h1, h2, h3, h4, h5, h6 { 
    margin-bottom: 20px; 
    text-transform: uppercase; 
    font-family: "Roboto Condensed", Helvetica, sans-serif; 
    font-weight: 300; 
} 

h1 { 
    font-size: 36pt; 
} 

h2 { 
    font-size: 24pt; 
} 

h3 { 
    font-size: 18pt; 
} 

h4 { 
    font-size: 16pt; 
} 

h5 { 
    font-size: 14pt; 
} 

h6 { 
    font-size: 12pt; 
} 

p { 
    font-size: 12pt; 
    margin-bottom: 12pt; 
    margin-right: 12px; 
    margin-left: 12px; 

} 

strong { 
    font-weight: 900; 
    font-family: "Roboto Condensed", Helvetica, sans-serif; 
    color: #e5e5e5; 
} 

a { 
    -webkit-transition: color 0.25s ease-in-out; 
    transition: color 0.25s ease-in-out; 
    font-family: "Roboto Condensed", Helvetica, sans-serif; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: #dff3fd; 
} 
a:visited { 
    color: #dff3fd; 
} 
li.active a, a:hover, a:active { 
    color: #e5e5e5; 
} 

.centered { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

.centered-y { 
    position: inline-block; 
    width: auto; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

.distribution-map { 
    position: relative; 
    width: 1190px; 
    padding: 20px; 
    box-sizing: border-box; 
    margin: 0 auto; 
} 
.distribution-map > img { 
    width: 100%; 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 
.distribution-map .map-point { 
    cursor: pointer; 
    outline: none; 
    z-index: 0; 
    position: absolute; 
    width: 40px; 
    height: 40px; 
    border-radius: 20px; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
    opacity: 0.8; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    -moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; 
    -o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; 
    -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out; 
    -webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s; 
    -webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; 
    transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; 
    background: rgba(26, 26, 26, 0.85); 
    border: 3px solid #dff3fd; 
} 
.distribution-map .map-point .content { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
    opacity: 0; 
    -webkit-transition: opacity 0.25s ease-in-out; 
    transition: opacity 0.25s ease-in-out; 
    width: 100%; 
    height: 100%; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
    transform: translateX(-50%); 
    overflow: overlay; 
} 
.distribution-map .map-point:active, .distribution-map .map-point:focus { 
    position: absolute; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 0; 
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 
    opacity: 1; 
    width: 550px; 
    height: 400px; 
    color: #e5e5e5; 
    z-index: 1; 
    -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out; 
    transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out; 
} 
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content { 
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 
    opacity: 1; 
    -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    -webkit-transition-delay: 0.25s, 0s, 0s; 
    -webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    overflow: hidden; 
} 
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active { 
    color: #dff3fd; 
} 
     </style> 
</head> 
<body> 
<h1></h1> 
<div class="distribution-map"> 


    <button class="map-point" style="top:24%;left:26.5%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another</h2> 
       <p>details</p> 
       <iframe width="350" height="197" src="https://www.youtube.com/embed/5MgBikgcWnY" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:26%;left:49%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:27.3%;left:71.4%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:63.5%;left:31.5%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another one</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:65%;left:56%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>another one</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:68%;left:74%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
</div>

kaynak

2016-04-01 Joe

Burada neden mutlak ve göreceli konumlandırma kullanıyorsunuz? Dokümanın normal akışının dışına çıkmanız için bir nedeniniz var mı? – BSMP

. Medya sorguları her zaman yeterli değildir. Pikselleri unutmayı öneriyorum. Yazı tipi boyutu için bile. Yapmanız gereken tek şey, her h1, h2 vb. Yerine yazı tipi boyutu için taban piksel (gövde) boyutunu değiştirmektir. Modern uygulamalar mümkün olduğunca az piksel kullanır. her zaman sorumlu Çevrelerinizin .distribution-map .map-point:active, .distribution-map .map-point:focus, .distribution-map .map-point:hover için de senin distrubution-map. içinde width: 100% kullanmak istiyorsanız durumda

Ben, her zaman senin duyarlı tasarım olsun bu şekilde ekranın% 50 genişliğini alacak örneğin width: 50% var.

Diğer soruları yanıtlayın: @Joe Bu nasıl 1em = 100% ≈ 12pt ≈ 16px. Ofc'de örneğin 20px'lik başka bir şey varsa (veya tarayıcı varsayılan px -> tarayıcıya bağlıdır) ve h1'inizi% 150 yaparsanız, örneğin 30px elde edersiniz (çocuklar boyutu kabul eder). Medya sorguları kullandığınızda bu harika. Sadece vücuttaki px'i değiştirmelisiniz ve gerisi sadece adapte oluyor. Sınırlarınızın genişliğine ve yüksekliğine gelince, biraz normalleştiriciniz veya sıfırlamanız (veya kendiniz 0px'e değiştirmeniz) gerekir, aksi takdirde varsayılan sınırlarınız da vardır. Bu yüzden% 40 +% 60 genişlik css'de% 100 daha yüksek olabilir. Başka bir problem, marjların tuhaf davranması. Genişlikte yeniden boyutlandırırsanız kenar boşluğu değişecektir ... Yükseklikte değil. Sadece pencerenizin yüksekliğini değiştirdiğinizde yeniden boyutlandırılabildiğinden, mümkün olduğunca çok kullanıyorum. Başlamanın en iyi yolu, önce mobil cihazlar için tasarım yapmaktır. (Progresif geliştirme) Baş ilk mobil web tüm bu okumayı öneririm O değiştirilmesi gerekir sadece bir tek ayardır görünüyor

kaynak

2016-04-01 10:13:50 PVL

PVL yanıtı için teşekkürler. Bu şeyleri istediğim boyuta getirme (piksel belirleme gibi), doğru boyutu bulmak için yüzdeyi deneyebilir miyim? Şerefe – Joe

@Joe Bir yorum bölümü için yukarıda, yukarıdaki yanıta uzun bakın. – PVL

Hepinize bir şeyler katacağım, size yardımcı olacağım PVL! :) – Joe

.distribution-map { 
    width: 100%; 
}

(yerine sabit bir genişliğin)

kaynak

2016-04-01 10:55:36 Johannes

Johannes'e teşekkürler. Ben hala bu genişliğini% 100 olarak ayarladığımda, genişlemişken hala ekrandan çıkınca, daireler buluyorum. Şerefe – Joe

HTML ve CSS'ye duyarlı bir bölüm oluşturma

cevap

İlgili konular