更改Nexus 7 2013上的方向时CSS媒体查询不起作用_Css

更改Nexus 7 2013上的方向时CSS媒体查询不起作用

css

更改Nexus 7 2013上的方向时CSS媒体查询不起作用,css,Css,我目前正在笔记本电脑、台式电脑和Nexus7 2013上测试CSS媒体查询。除了Nexus7之外，它们都可以在台式机和笔记本电脑上正常工作。更改方向时，除非刷新页面，否则不会应用样式。例如：在纵向模式下握住设备时，页面处于良好状态。当我以横向模式打开它时，页面会断开。但是，当我刷新页面时，它会加载横向样式。我不确定我做错了什么这是我的密码： HTML: 我更喜欢只使用“最大宽度”和“最小宽度”，因为这是针对视口的，而不是设备。这样，当您旋转设备时，视口会发生变化，加载的媒体查询也会发

我目前正在笔记本电脑、台式电脑和Nexus7 2013上测试CSS媒体查询。除了Nexus7之外，它们都可以在台式机和笔记本电脑上正常工作。更改方向时，除非刷新页面，否则不会应用样式。例如：在纵向模式下握住设备时，页面处于良好状态。当我以横向模式打开它时，页面会断开。但是，当我刷新页面时，它会加载横向样式。我不确定我做错了什么

这是我的密码：

HTML:

我更喜欢只使用“最大宽度”和“最小宽度”，因为这是针对视口的，而不是设备。这样，当您旋转设备时，视口会发生变化，加载的媒体查询也会发生变化

而且我相信你有太多的媒体询问，可能其中一些是干扰

忘记不同类型的设备，只考虑分辨率。现在你不知道1024px设备是高端手机、普通平板电脑还是小型台式机。或者如果768是平板电脑肖像或手机风景

具有较少的断点，并确保您的设计适合每个媒体查询的最低部分。例如，在进行320-480媒体查询时，在320px上进行测试，如果它适合，那么它也将适合479px

您的断点应该是 0 - 319 320-479 480-767 768-989 990-1200 1600+和1900年可能会有一些+

使用这些制动点创建了许多响应性强的网站，它们在任何设备上都非常有效。

有人明白我的意思吗？我有一个非常类似的问题。当我在纵向加载页面时，它会应用特定于纵向的css，但是如果我切换到横向并返回，它不会重新应用它。一旦我找到答案，我会发布一个答案。您是否尝试在MQ中使用

orientation:landscape

？也许它会更好，用它来测试你的布局，只在你的设计真正“中断”的地方设置中断。。。

    <!DOCTYPE HTML>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<link rel="stylesheet" media="screen" href="styles.css">
<body>

Content goes here!

</body>
</html>

    /*iPhone PORTRATE*/
@media screen and (max-width:321px) and (min-width:3px){
html{background-color:yellow;}}

/*iPhone LANDSCAPE*/
@media screen and (max-width:480px) and (min-width:322px){
html{background-color:cyan;}}

/*533px*/   
@media screen and (max-width:533px) and (min-width:481px){
html{background-color:pink;}}

/*iPhone 5 LANDSCAPE*/
@media screen and (max-width:568px) and (min-width:534px){
html{background-color:green;}}

/*Resolutions bellow 800px must be tested on specific devices*/

/*600 px - Nexus 7 2013 portrait*/
 @media only screen and (max-device-width : 600px) and (min-device-width : 569px) and (orientation : portrait){
html{background-color:orange;
 }}

/*960 px - Nexus 7 2013 Landscape*/
@media only screen and (max-device-width : 960px) and (min-device-width : 601px) and (orientation: landscape){
html{background-color:red;
}}

/*Desktop and laptop*/

/*800px*/
@media screen and (max-width:800px) and (min-width:601px){
html{background-color:grey;
}}

/*1024px*/  
@media screen and (max-width:1024px) and (min-width:961px){
html{background-color:black;
}}

/*1152px */ 
@media screen and (max-width:1152px) and (min-width:1025px){
html{background-color:blue;
}}

/*1280px*/
@media screen and (max-width:1280px) and (min-width:1153px){
html{background-color:brown;
}}

/*1366px*/
@media screen and (max-width:1366px) and (min-width:1281px){
html{background-color:black;
}}


/*1440px*/
@media screen and (max-width:1440px) and (min-width:1367px){
html{background-color:purple;
}}

/*1600px*/
@media screen and (max-width:1600px) and (min-width:1441px){
html{background-color:lime;
}}

/*1776px*/
@media screen and (max-width:1776px) and (min-width:1601px){
html{background-color:silver;
}}

/*1920px*/
@media screen and (max-width:1920px) and (min-width:1777px){
html{background-color:chocolate;
}}