[英]How to use media queries properly
我正在設計一個響應式網頁。 我有一個div,其寬度應在屏幕尺寸減小時減小。
該div還包含兩個圖像鏈接的列表。 即使屏幕寬度減小,它們也應保持內聯。
/* The CSS */
div.mymenu{
margin-right:7%;
margin-top:-53px;
background:#000;
width: 28.5%;
opacity:0.8;
}
div.mymenu > .nav-pills{
margin-bottom:7px;
}
div.mymenu > .nav-pills a{
color:#fff;
margin-left: 30%;
}
div.mymenu > .nav-pills a:hover{
background:none;
}
<!-- The HTML -->
<div class="mymenu pull-right">
<ul class="nav nav-pills">
<li><a href="">Why Us</a></li>
<li><a href=""><img src="img/news.png" /></a></li>
<li><a href=""><img src="img/help.png" /></a></li>
</ul>
</div>
我正在使用Twitter Bootstrap。 我嘗試對bootstrap-sensitive.css進行更改-但沒有更改。 我進行了如下更改:
@media (min-width: 768px) and (max-width: 979px) {
.mymenu{
width: 20%;
}
}
對於流體設計,我非常建議使用Skeleton: http : //www.getskeleton.com/
在這里,您有一個@media查詢的標准
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
來自阿根廷的問候!
您當前的媒體查詢將這些樣式限制為768px
和979px
之間的瀏覽器。 刪除第二個媒體查詢(979),使其適用於所有寬度大於768 px
視口。
@media (min-width: 768px) {
.mymenu {
width: 20%;
}
}
另外,請注意,我建議將div.mymenu
選擇器修整為.mymenu
, div
限制選擇器的適用性(也許您會希望ul
與.mymenu
具有相同的樣式),並且輸入更多: )
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.