Question

我有以下代码：

@media all 
    and (max-device-width: 360px) {
        div {
            background-color: green;
            }
        }

@media all
    and (min-device-width: 361px)
    and (max-device-width: 640px) {
        div {
            background-color: blue;
            }
        }

但是当我改变我的Android手机的方向时，颜色不会改变。为什么当我检查从640px（横向）到360（纵向）的window.innerWidth更改时会发生这种情况？

Answer 1

Always set the viewport in the head.

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

For more details about viewport meta tag go here.

Here list some basic media query list

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}
/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

Go to here for more details about Media Query

I'm using a better one. I find out that these media queries break points match many more devices and desktop screen resolutions.

All media queries responsive menu + media break points

@media only screen and (min-width: 320px) and (max-width: 479px){ ... }

@media only screen and (min-width: 480px) and (max-width: 767px){ ... }

@media only screen and (min-width: 768px) and (max-width: 991px){ ... }

@media only screen and (min-width: 992px) and (max-width: 1999px){ ... }

Answer 2

您要定义import csv from bs4 import BeautifulSoup # Open/create csvfile and prep for writing csvFile = open("attendees.csv", 'w+', encoding='utf-8') outputWriter = csv.writer(csvFile) # Open HTML and Prep BeautifulSoup html = open('WEB SUMMIT _ LISBON 2016 _ Web Summit Featured Attendees.html', 'r', encoding='utf-8') bsObj = BeautifulSoup(html.read(), 'html.parser') itemList = bsObj.find_all("li", {"class":"item"}) outputWriter.writerow(['Name','Title','Company','Country']) for item in itemList: name = item.find("h4").get_text() print(type(name)) title = item.find("strong").get_text() print(type(title)) company = item.find_all("span")[1].get_text() print(type(company)) country = item.find_all("span")[2].get_text() print(type(country)) print("%s is a %s at %s in %s" % (name,title,company,country)) outputWriter.writerow([name,title,company,country])两次。有时我们没有意识到这一点，它发生了。

正确的sintax是：

max-device-width

Answer 3

您是否已将视口设置在头部？

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

您可能需要尝试使用max-width和min-width而不是max-device-width和min-device-width，具体取决于您是在浏览器中还是在手机上进行测试。

Answer 4

此媒体查询仅用于不适用于浏览器的设备。检查设备

＆＃13;

/* SAMSUNG NOTE 2 in PORTRAIT */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:1920px) and (orientation : portrait) {
	div { 
		background-color: green;
	}
}

/* SAMSUNG NOTE 2 in LANDSCAPE */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:1920px) and (orientation : landscape) {
	div { 
		background-color: blue;
	}
}

/*  IPAD in PORTTRAIT */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
	div { 
		background-color: green;
	}
}

/*  IPAD in LANDSCAPE */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
	div { 
		background-color: blue;
	}
 }


/* IPHONE4 LANDSCAPE */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
	div { 
		background-color: green;
	}	
}

/* IPHONE5 PORTRAIT */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
	div { 
		background-color: blue;
	}
}

/* SAMSUNG S4 in PORTRAIT */
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
	div { 
		background-color: green;
	}
}

/* SAMSUNG S4 in LANDSCAPE */
@media only screen and (min-device-width : 360px) and (max-device-width :640px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
	div { 
		background-color: blue;
	}
}

＆＃13;

最大设备宽度和方向更改

4 个答案: