Question

在我的网站上，我尝试使用媒体广告来指定移动设备尺寸，平板电脑尺寸和桌面尺寸。好吧，当我对平板电脑进行编辑时，它会将这些编辑应用到整个页面，而不是仅限于平板电脑的大小。我该怎么做才能阻止这种情况并继续进行响应式设计。

    @media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ 
    nav{
        width: 100%;
        float: left;
        text-align: center;
        min-height: 50px;
    }
    nav > ul {
        margin-top: 50px;
        padding: 0;
        display: none;
        list-style: none;
    }


    nav > ul > li, nav > ul > li > a {
        line-height: 20px;
        display: list-item;
        margin-left: 0;
        font-size: 26px;
    }
    .hamburger {
        padding: 20px;
        display: block;
        float: left;
        text-align: center;
        color: #fff;
        font-size: 40px;
        cursor: pointer;
    }
}

    @media screen and (max-width: 768px) { 
 /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 

    nav{
        width: 100%;
        float: left;
        text-align: center;

    }
    nav > ul {
        margin-top: 50px;
        padding: 0;
        display: none;
        list-style: none;
    }
    nav > ul > li, nav > ul > li > a {
        line-height: 0px;
        display: list-item;
        margin-left: 0;
    }
    .hamburger {
        padding: 20px;
        display: block;
        float: left;
        text-align: center;
        color: #000;
        font-size: 10px;
        cursor: pointer;
    }

}

Answer 1

您可以按顺序关注此查询。希望它会有所帮助。

/* Large screen desktop */
@media (min-width: 1170px) and (max-width: 1365px){

}

/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1169px) {

}


/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {

}

/* small mobile :320px. */
@media (max-width: 767px) {

}

/* Large Mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

Answer 2

要获得自适应图像，您有几个选择。

使用scrset指定一般大小：

小：针对移动用户的600 px以下

中等：针对中型计算机和平板电脑的600 px-900 px

大：超过900 px针对桌面显示器。

Scrset也可用于指定屏幕空间的百分比。例如，如果您希望图像覆盖屏幕的整个宽度，则可以使用100%。然后，无论设备如何，浏览器都会将图像调整为访问者屏幕大小的100％宽度。

您还可以使用标签和自动选项作为尺寸参数。例如：<img> width=auto height=auto。这将使用客户端信息来调整图像大小。

第三，虽然没有被广泛接受，但您可以使用client_hints=true和自动尺寸选项来获取响应式图像。 Chrome完全支持此功能，但尚未被其他热门浏览器支持。

我正在尝试使用多个mq进行响应式样式

2 个答案: