響應網頁設計媒體查詢寬度不變

我正在努力使頁面響應，通過根據大小更改div width，但除了寬度每個屬性我能夠改變，width根本沒有改變。響應網頁設計媒體查詢寬度不變

我的HTML代碼和造型元素

#main { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
#main div { 
 
    width: 100%; 
 
} 
 
@media screen and (max-width: 700px) { 
 
    #red { 
 
    display: none; 
 
    } 
 
    body { 
 
    background-color: yellow; 
 
    } 
 
    #blue { 
 
    width: 75%; 
 
    }

<body> 
 
    <div id="main"> 
 
    <div id="red" style="background-color: red;">RED COLOR</div> 
 
    <div id="blue" style="background-color: blue;">BLUE COLOR</div> 
 
    <div id="green" style="background-color: orange;">GREEN color</div> 
 
    </div>

這是我試過的代碼，但除了width每個屬性我能夠改變我如何改變width財產？

來源

2016-04-13 Niranjan Dattatreya

問題是您的#main div款式比您的#blue款式更具體。

更改媒體查詢樣式

#main #blue{ 
    width: 75%; 
}

來源

2016-04-13 16:41:54 kravse

開始頭標記之後添加視口元標記。

<meta name="viewport" content="width=device-width, initial-scale=1">

一個視口元素爲瀏覽器指示如何控制頁面的尺寸和縮放。

該標籤對於網頁的響應速度很重要。它根據屏幕大小控制您的網頁寬度。

來源

2016-04-13 16:42:08 Vinaya

這個固定的問題，對我來說，非常感謝！ –

不使用內嵌樣式（這是一個不好的做法），這是所有關於特異性，所以你可以設置只div（用於width:100%）或指定#blue甚至更多，通過增加它的父母，在這種情況下#main。

可以計算特異性here

#main { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
div { 
 
    width: 100%; 
 
} 
 
#red { 
 
    background: red 
 
} 
 
#blue { 
 
    background: blue 
 
} 
 
#green { 
 
    background: green 
 
} 
 
@media screen and (max-width: 700px) { 
 
    #red { 
 
    display: none; 
 
    } 
 
    body { 
 
    background-color: yellow; 
 
    } 
 
    #blue { 
 
    width: 75%; 
 
    } 
 
}

<div id="main"> 
 
    <div id="red">RED COLOR</div> 
 
    <div id="blue">BLUE COLOR</div> 
 
    <div id="green">GREEN color</div> 
 
</div>

來源

2016-04-13 16:44:13 dippas

你#main div有優先於#blue格，因爲它是在媒體查詢之外定義。如果你想申請寬度：75％至僅#blue DIV使用最大寬度，屬性爲：

#blue { 
max-width: 75%; 
}

工作demo

來源

2016-04-13 16:51:21

響應網頁設計媒體查詢寬度不變

回答

相關問題