Farklı divların resimlerinin hangi @ media içerisine bağlı olarak silinmesi ya da yeniden boyutlandırılması?

Web sitemin genişliğini değiştirmek için @media'yı nasıl kullanacağımı anlamaya çalıştım, ancak düğme görüntüleri çok küçük oluyor ve web sitesinin bir kısmının boyutunu değiştirmek istiyor. Daha büyük bir resim boyutu olmak için web sitesindeki tüm resimlerin nasıl değiştirileceğini anladım;Farklı divların resimlerinin hangi @ media içerisine bağlı olarak silinmesi ya da yeniden boyutlandırılması?

@media only screen and (max-device-width: 480px) { 
 
img { 
 
    width: 65px; 
 
    height: 65px; 
 
} 
 
}

yüzden belli bir yükseklik/genişlik sadece konteynerleri div görüntüleri değiştirmek isterse, ne yapmalıyım? Ayrıca, bu @ media'yı kullanarak html'de tek bir görüntü gibi bir div ile bile olmayan bir görüntüyü değiştirebilir misiniz? ve son istediğim şey, @media kullanarak görüntüleri kaybolabilir mi? Şu an için bir web araması yapıyordum ve bunu anlayamıyorum !!! herhangi bir yardım gerçekten takdir olurdu :) teşekkürler Bu gerekli olursa, web siteme kodu kodları? ve web sitem www.lawrencetrigg.tk Şerefe çocuklar ve kızlar! Eğer @media{...} etiketi altında eklemek

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Lawrence Trigg</title> 
 
<link rel="images/favicon.ico" href="images/favicon.ico"> 
 
<style type="text/css"> 
 

 

 

 

 
a:-webkit-any-link{ 
 
text-decoration:none !important; 
 
} 
 
body { 
 
\t background-color: black; 
 
} 
 
#top { 
 
    position: absolute; 
 
    top: 0px; 
 
    background-image: url("images/background-top-one.jpg"); 
 
    background-repeat: repeat-x; 
 
    left: 0; 
 
    right: 0; 
 
    width: 750px; 
 
    height: 100%; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 

 
} 
 
#bottom1 { 
 
    position: fixed; 
 
    background-image: url("images/background-bottom-one.jpg"); 
 
    bottom: 0px; 
 
    left: 0; 
 
    right: 0; 
 
    width: 750px; 
 
    height: 150px; 
 
    color: black; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    
 
} 
 

 
div.transbox { 
 
font-size: 16px; 
 

 
    margin: 30px; 
 
    background-color: #AAAAAA; 
 
    border: 1px solid black; 
 
    opacity: 0.7; 
 
    filter: alpha(opacity=60); /* For IE8 and earlier */ 
 
} 
 

 
div.transbox p { 
 
    margin: 5%; 
 
    font-weight: bold; 
 
    color: #000000; 
 
} 
 
div.col-middle-one { 
 
\t float: left; 
 
\t width: 100%; 
 
\t font-size: 20px; 
 
\t padding: 1px; 
 

 
\t height: 250px; 
 

 
\t 
 
\t border-color: white; 
 
\t color: white; 
 
\t top: 50px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
\t top: 0px; 
 
} 
 

 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 

 
a.tooltip {outline:none; } 
 
a.tooltip strong {line-height:30px;} 
 
a.tooltip:hover {text-decoration:none;} 
 
a.tooltip span { 
 
    z-index:10;display:none; padding:14px 20px; 
 
    margin-top:60px; margin-left:-160px; 
 
    width:300px; line-height:16px; 
 
} 
 
a.tooltip:hover span{ 
 
    display:inline; position:absolute; 
 
    border:2px solid #FFF; color:#EEE; 
 
    background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0; 
 
} 
 
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;} 
 
    
 
/*CSS3 extras*/ 
 
a.tooltip span 
 
{ 
 
    border-radius:2px;   
 
    box-shadow: 0px 0px 8px 4px #666; 
 
    /*opacity: 0.8;*/ 
 
} 
 

 

 
@media screen and (max-width:850px) { 
 
\t 
 
\t #top { 
 
    position: absolute; 
 
    top: 0px; 
 
    background-image: url("images/background-top-one.jpg"); 
 
    background-repeat: repeat-x; 
 

 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 

 
} 
 
#bottom1 { 
 
    position: fixed; 
 
    background-image: url("images/background-bottom-one.jpg"); 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: 150px; 
 
    color: black; 
 
    text-align: center; 
 
    
 
} 
 
} 
 
@media only screen and (max-device-width: 480px) { 
 
img { 
 
    width: 65px; 
 
    height: 65px; 
 
} 
 
\t #top { 
 
    position: absolute; 
 
    top: 0px; 
 
    background-image: url("images/background-top-one.jpg"); 
 
    background-repeat: repeat-x; 
 
font-size: 25px; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 

 
} 
 
#bottom1 { 
 
    position: fixed; 
 
    background-image: url("images/background-bottom-one.jpg"); 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: 250px; 
 
    color: black; 
 
    text-align: center; 
 
    
 
    
 
} 
 
div.transbox { 
 
font-size: 25px; 
 

 
    margin: 30px; 
 
    background-color: #AAAAAA; 
 
    border: 1px solid black; 
 
    opacity: 0.7; 
 
    filter: alpha(opacity=60); /* For IE8 and earlier */ 
 
} 
 

 
} 
 

 

 
</style> 
 
</head> 
 

 
<body> 
 
<div id="top"> 
 

 
<div class="col-top-one"> 
 
<ul> 
 
    <li><a class="active" href="index.html">Home</a></li> 
 
    <li><a href="education.html">Education</a></li> 
 
    <li><a href="#skills.html">Skills</a></li> 
 
    <li><a href="#work.html">Work</a></li> 
 
    <li><a href="#gym.html">Gym</a></li> 
 
    <li><a href="images/cv/lawrencecv2016.docx">Download CV</a></li> 
 
    
 
    <a href="https://www.facebook.com/Lawrencetrigg" class="tooltip"> 
 
    <img src="images/icons/social-facebook32.png" onmouseover="this.src='images/icons/social-facebook322.png'" onmouseout="this.src='images/icons/social-facebook32.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/social-facebook32.png" style="float:right;" /> 
 
     <strong>Facebook</strong><br /> 
 

 
    </span> 
 
</a> 
 
    <a href="https://www.steam.com" class="tooltip"> 
 
    <img src="images/icons/social-steam32.png" onmouseover="this.src='images/icons/social-steam322.png'" onmouseout="this.src='images/icons/social-steam32.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/social-steam32.png" style="float:right;" /> 
 
     <strong>Steam</strong><br /> 
 

 
    </span> 
 
</a> 
 
<a href="https://www.youtube.com" class="tooltip"> 
 
    <img src="images/icons/social-youtube32.png" onmouseover="this.src='images/icons/social-youtube322.png'" onmouseout="this.src='images/icons/social-youtube32.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/social-youtube32.png" style="float:right;" /> 
 
     <strong>Youtube</strong><br /> 
 

 
    </span> 
 
</a> 
 
<a href="https://www.dropbox.com" class="tooltip"> 
 
    <img src="images/icons/social-dropbox32.png" onmouseover="this.src='images/icons/social-dropbox322.png'" onmouseout="this.src='images/icons/social-dropbox32.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/social-dropbox32.png" style="float:right;" /> 
 
     <strong>Dropbox</strong><br /> 
 

 
    </span> 
 
</a> 
 
<a href="https://www.skype.com" class="tooltip"> 
 
    <img src="images/icons/social-skype32.png" onmouseover="this.src='images/icons/social-skype322.png'" onmouseout="this.src='images/icons/social-skype32.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/social-skype32.png" style="float:right;" /> 
 
     <strong>Skype</strong><br /> 
 

 
    </span> 
 
</a> 
 
    <a href="https://www.google.com" class="tooltip"> 
 
    <img src="images/icons/social-googleplus32.png" onmouseover="this.src='images/icons/social-googleplus322.png'" onmouseout="this.src='images/icons/social-googleplus32.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/social-googleplus32.png" style="float:right;" /> 
 
     <strong>Google Plus</strong><br /> 
 

 
    </span> 
 
</a> 
 

 

 
</ul> 
 
<div class="col-middle-one"> 
 

 

 

 
<div class="transbox"> 
 
    <p>Lawrence William Trigg</p> 
 
<p>I am a bright, young and ambitious individual who is self-motivated and organised. I can work well under pressure and am able to meet targets and deadlines, I am eager to learn new skills and feel the ones currently gained give a vast and varied history to draw from and implement in new situations. Working well within a team is something I enjoy, however I am also capable of working under my own initiative. </p> 
 
</div> 
 
<div class="transbox"> 
 
    <p>Under Construction</p> 
 
    
 
</div> 
 
</div> 
 

 
</div> 
 
<div id="bottom1"> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-mobile1.png" onmouseover="this.src='images/icons/icon-mobile2.png'" onmouseout="this.src='images/icons/icon-mobile1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-mobile1.png" style="float:right;" /> 
 
     <strong>Mobile Number</strong><br /> 
 
     0481718550 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-email1.png" onmouseover="this.src='images/icons/icon-email2.png'" onmouseout="this.src='images/icons/icon-email1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-email1.png" style="float:right;" /> 
 
     <strong>Email Address</strong><br /> 
 
     [email protected] 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-picture1.png" onmouseover="this.src='images/icons/icon-picture2.png'" onmouseout="this.src='images/icons/icon-picture1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-picture1.png" style="float:right;" /> 
 
     <strong>Name</strong><br /> 
 
     Lawrence Trigg 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-home1.png" onmouseover="this.src='images/icons/icon-home2.png'" onmouseout="this.src='images/icons/icon-home1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-home1.png" style="float:right;" /> 
 
     <strong>Test</strong><br /> 
 
    Home 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-favorite1.png" onmouseover="this.src='images/icons/icon-favorite2.png'" onmouseout="this.src='images/icons/icon-favorite1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-favorite1.png" style="float:right;" /> 
 
     <strong>Test</strong><br /> 
 
    Favorite 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-website1.png" onmouseover="this.src='images/icons/icon-website2.png'" onmouseout="this.src='images/icons/icon-website1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-website1.png" style="float:right;" /> 
 
     <strong>Website</strong><br /> 
 
    http://lawrencetrigg.tk/ 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-dob1.png" onmouseover="this.src='images/icons/icon-dob2.png'" onmouseout="this.src='images/icons/icon-dob1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-dob1.png" style="float:right;" /> 
 
     <strong>Date Of Birth</strong><br /> 
 
    8th May 1989/26 Years old 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-location1.png" onmouseover="this.src='images/icons/icon-location2.png'" onmouseout="this.src='images/icons/icon-location1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-location1.png" style="float:right;" /> 
 
     <strong>Test</strong><br /> 
 
    Location 
 
    </span> 
 
</a> 
 

 

 
</div> 
 
</body> 
 
</html>

kaynak

2016-04-04 Lawrence William Trigg

Kimlik ve sınıfları içinde @ media içinde css'de kullanabilirsiniz. –

şey sadece belirtilen ekran boyutu üzerinde çalışacak. Örneğin, aşağıdaki medya bloğunda belirtilen herhangi bir kural, yalnızca width of the screen is <= 480px ise işe yaramaz. (I) Eğer belli yükseklik/genişlik konteynerleri sadece div görüntüleri değiştirmek istedim

@media only screen and (max-device-width: 480px){..}

, ne yapmalıyım: Yani değişim yüksekliği belirli ekran boyutları için başka şeyler yapmak, gizleyebilirsiniz?

bu @media kullanarak html tek resim gibi, bir div ile ilgisi bile görüntüyü değiştirebilir @media etiketi Ayrıca

@media...//screen size{ 

.certain-image-class{ 
    //css rules here 
} 
}

altına ekle? hemen üstünde gibi

Evet

. im soran ederken, sen @media kullanarak kaybolur görüntüleri yapabilir class veya id

@media...//screen size{ 

    .myImage{ 
     //css rules here 
    } 

    #myImage{ 
     //css rules here 
    } 
    }

son şey görüntüyü atama?

Evet, yukarıdaki (Kullanım sınıfı ya da Id) gibi aynı; Görüntü belirtilen boyutta gösterilmez:

kaynak

2016-04-04 00:37:44 TheUknown

Cevabınız için çok teşekkür ederim! Bunu deneyeceğim :) takdir! –

Farklı divların resimlerinin hangi @ media içerisine bağlı olarak silinmesi ya da yeniden boyutlandırılması?

cevap

İlgili konular