我目前正在笔记本电脑、台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询。 除了 Nexus 7 之外,它们都可以在台式机和笔记本电脑上正常工作。 当我改变方向时,样式不适用,除非我刷新页面。 例如:当以纵向模式手持设备时,页面正常。 当我以横向模式打开它时,页面会中断。但是,当我刷新页面时,它会加载横向样式。 我不确定我做错了什么。
这是我的代码:
HTML:
<!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>
CSS:
/*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;
}}
最佳答案
我更喜欢只使用“max-width”和“min-width”,因为这针对的是视口(viewport),而不是设备。这样,当您旋转设备时,视口(viewport)会发生变化,加载的媒体查询也会发生变化。
此外,我相信您有太多的媒体查询,其中一些可能会产生干扰。
忘掉不同类型的设备,只考虑分辨率。现在你不知道 1024px 设备是高端手机、普通平板电脑还是小型台式机。 或者如果 768 是平板纵向或手机横向。
减少断点,并确保您的设计适合每个媒体查询的最低部分。比如做320-480的媒体查询时,在320px上测试,如果合适,479px也能很好的适应。
你的断点应该是 0 - 319 320-479 480-767 768-989 990-1200 也许还有一些用于 1600+ 和 1900+
使用这些制动点制作了很多响应式网站,它们在任何设备上都表现出色。
关于在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20026904/