[英]Resizing a logo at different sizes and selecting
1)我該如何選擇該div下僅用於徽標的圖像?
<div id="logo"><a href="myurl.com"><img src="mysite.com/logo.jpg" title="My Logo" alt="My Website"></a></div>
可不可能是?
#logo.src {
}
2)理想情況下,當頁面達到一定尺寸時,我想引用其他較小的徽標。 我可以在div中添加徽標src作為背景圖像,然后在樣式表中對其進行引用嗎?
eg for 768px
#logo {
background-image: url('/logo-768px.jpg');
background-repeat: no-repeat;
}
然后
eg for 480px
#logo {
background-image: url('/logo-480px.jpg');
background-repeat: no-repeat;
}
第二種選擇:
將此添加到您的頭上:
<meta name="viewport" content="width=device-width, initial-scale=1">
您的CSS將是:
@media screen and (max-device-width: 767px){ /* From 0px to 767px */
#logo {
background-image: url('/logo-480px.jpg');
background-repeat: no-repeat;
}
}
@media screen and (min-device-width: 768px){ /* From 768px and up */
#logo {
background-image: url('/logo-768px.jpg');
background-repeat: no-repeat;
}
}
viewport標記定義了屏幕的寬度並使CSS device-width
起作用。 我可以嘗試自己解釋一下,但是有很多很好的文章: https : //developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
僅定位img:
#logo a img {
/*style*/
}
並閱讀以下內容: http : //alistapart.com/article/using-sensitive-images-now
這是: https : //css-tricks.com/snippets/css/media-queries-for-standard-devices/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.