我寫(xiě)了四種分辨率響應(yīng)的css 然而我分辨率寬度大于1200px的時(shí)候，顯示出的效果確是768分辨率的那個(gè)。然后我把四種格式隨機(jī)打亂排列發(fā)現(xiàn)1200px以上時(shí)基本只顯示排在最后那個(gè)分辨率下的CSS樣式。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>123123</title><link rel="stylesheet" href="file:///F|/my history/test2018.3.5-2018.3.6/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />? <style>? ? body{ width:100%; height:100%; margin:0; padding:0; } div{ height:100%; } #header{ height:30px; font-size:12px; color:grey; background-color:whitesmoke; } div p{ line-height:30px; } #loginmessage{ text-align:right; } #logoutbtn{ height:100%;? background-color:#F33;? border-width:0px;? color:white; } .container { ?padding-right: 15px; ?padding-left: 15px; ?margin-right: auto; ?margin-left: auto; } @media (min-width: 1200px) { ?.container { width: 1170px; ?} ? #logoutbtn{ width:150%; } } @media (min-width: 992px) { ?.container { width: 970px; ?} ? #logoutbtn{ width:100%; } } ? ? @media (min-width: 768px) { ?.container { width: 750px; ?} ? #logoutbtn{ width:130%; } } @media (max-width: 768px) {? .container {? ? width: auto;? } ? #logoutbtn{ width:100%; } ? #loginmessage{ display:none; } } ? ? </style></head><body>? ? <div id="header">? ? ? ? <div class="container">?? ? ? ? <div class="row">? ? ? ? ? ? ? ? <div class="col-lg-3 col-md-3 col-sm-4 col-xs-8">? ? ? ? ? ? ? ? ? ? <p>文本</p>? ? ? ? ? ? ? ? </div>? ? ? ? ? ? ? ? <div class="col-lg-8 col-md-7 col-sm-6 col-xs-1">? ? ? ? ? ? ? ? ? ? <p id="loginmessage">右對(duì)齊文本</p>? ? ? ? ? ? ? ? </div>? ? ? ? ? ? ? ? <div class="col-lg-1 col-md-2 col-sm-2 col-xs-3">? ? ? ? ? ? ? ? ? ? <input id="logoutbtn" type=button value="退 出" onclick="location. />? ? ? ? ? ? ? ? </div>? ? ? ? ? ? </div>? ? ? ? </div>? ? </div></body></html>打個(gè)比方我把@media (min-width: 992px) {?.container {width: 970px;?}? #logoutbtn{width:100%;}這個(gè)放在最底下的時(shí)候，分辨率在1200PX以上時(shí)，顯示的就是上面的樣式。還有在IE11的情況下，即使打亂順序也不會(huì)出現(xiàn)上面的情況。我用chorme、360、edge打開(kāi)都出現(xiàn)上述情況。請(qǐng)問(wèn)究竟是瀏覽器的確不支持還是哪里有問(wèn)題，還是說(shuō)@media的確要按分辨率大小順序嚴(yán)格編寫(xiě)。
@media 的分辨率編寫(xiě)順序一定要按順序嗎
慕無(wú)忌3133386
2018-03-09 17:45:38
