1

我正在设计一个响应式网页。我有一个 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>

我正在使用推特引导程序。我尝试对 bootstrap-responsive.css 进行更改 - 但没有任何更改。我进行了更改，例如：-

@media (min-width: 768px) and (max-width: 979px) {
.mymenu{
 width: 20%;
}
}
4

3 回答 3

3

对于流体设计，我非常推荐使用 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) {

    }

来自阿根廷的问候！

于 2013-04-05T21:32:25.343 回答
3 
/* 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 */
}
于 2014-03-07T17:03:50.267 回答
2

您当前的媒体查询会将这些样式限制在 和 之间的浏览器768px中979px。删除第二个媒体查询 (979) 以使其适用于所有宽于768 px.

@media (min-width: 768px)  {
    .mymenu {
      width: 20%;
    }
}

另外，请注意，我建议将选择器修剪div.mymenu到仅限制选择器.mymenu的div适用性（也许您会希望 aul具有与 相同的样式.mymenu），并且键入更多:)

于 2013-04-05T21:15:10.117 回答