使用CSS媒体查询,您可以使用max-device-width目标设备宽度(例如iPhone或Android设备)和/或max-width以页面宽度为目标.
如果您使用max-device-width,当您更改桌面上浏览器窗口的大小时,CSS将不会更改,因为您的桌面不会更改大小.
如果您使用max-width,当您更改桌面上浏览器窗口的大小时,您可能会看到面向移动的样式,例如触摸友好元素和菜单等等.
现在不推荐使用针对特定浏览器(和设备？),您应该对目标设置更加不可知.这也适用于媒体查询吗？
你为什么要瞄准另一个？推荐哪一个？
这是我在生产网站上使用的媒体查询示例:
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {
/* Change a menu to fit the screen better, etc... */
}
我倾向于使用max-device-width和max-width.
所以我正在开发我的第一个响应式网站,该网站广泛使用媒体查询.我想知道是否有一些我应该优化的常见页面宽度.
我可能会有一个最大宽度(没有完全流畅)我想我可能有3-5个设置宽度,它们之间有趣的小CSS3过渡(类似于CSS Tricks的工作方式).
目前我使用的数字有些随意:
@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}
另外,我想我已经读过一些移动设备没有按预期运行(有@media).这在哪里发挥作用,我应该如何处理这些情况？
我正在测试我正在开发的网站并正在使用媒体查询.
当我在浏览器中测试和调整页面大小时,一切都很好.
但是当我在移动设备上测试时,当我改变手机的方向时遇到问题.
如果我在landscape模式下加载页面,则应用正确的CSS.
当我改为时portrait,CSS也是正确的.
但如果我回去landscape,portraitcss类仍在应用.
我正在使用这些元标记
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
在我的媒体查询中
@media
only screen and (max-width: 610px),
only screen and (max-width: 610px) and (orientation:landscape) { ... }
@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... }
我已经提醒设备宽度以确保它没问题,并且在landscape模式下它是598px宽的并且portrait是384px
我正在使用Nexus 4(Android 4.3)
一旦我改变方向,怎么没有应用CSS？
编辑:
如果我加载网站portrait,然后更改为landscape,则不应用CSS.就好像一旦达到最小分辨率,就无法回头.
例如,这个网站:
http://8faces.com/使用max-width.
本教程使用max-device-width:
例:
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}
他们之间有什么区别？他们在Android,iOS,iPad等工作吗？
这在Wordpress Twenty Eleven主题的css文件中意味着什么.
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
有谁知道为什么我的媒体查询代码不起作用？
<div class="box"></div>
.box {
background-color: red;
width: 100%;
height: 50px;
}
@media only screen and (max-device-width: 768px) {
.box {border: 5px solid blue;}
}
我对高级 CSS 还很陌生。我有一个自定义标题部分，我想仅以移动设备为中心。我添加了类名和以下代码，但什么也没发生。
.mobile-text {
text-align: right;
}
@media (max-device-width: 600px) {
.mobile-text {
text-align: center;
}
}
这是这个网站的主页，段落如下：
挑战规范并提高期望的房地产。这是黑白世界中的多彩思维。
我试图进行设备检测（适用于智能手机，平板电脑和笔记本电脑），但最终进入了显示我所需要的几乎所有内容的站点。不幸的是，我被告知那些查询（例如：device-width）已被弃用！
有什么解决方法吗？