CSS媒體查詢無法正常工作
[英]Css Media Queries not working fine
問題描述
問題
CSS媒體查詢在Smartphones和Phablets中不能很好地工作，但是在模擬器中則可以很好地工作。 問題在於媒體查詢缺少匹配。 例如，我的手機屏幕尺寸為320px，但應用了720px css。
也許
我的問題是由於缺少“（min-device-pixel-ratio：1.5）”而引起的。 但我不知道它是什么以及如何使用它。
網站
@media only screen and (min-width: 480px) and (max-width: 619px)
@media only screen and (min-width: 320px) and (max-width: 479px)
@media only screen and (min-width: 250px) and (max-width: 319px)
@media only screen and (max-width: 249px)
3 個解決方案
解決方案1
1 2013-12-14 14:27:03
這是您頁面的元標記。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
解決方案2
0 已采納
看看一些媒體查詢
解決方案3
0 2013-12-16 19:35:15
如果您對CSS Media Queries的投入不多 ，也許可以嘗試Restive Plugin 。 當您構建響應式網站（或為移動設備改裝台式機網站）時，它使事情變得容易一些。
有一個“入門”指南在這里： http://blog.restive.io/posts/5852603/getting-started-with-restive-plugin ，並使用CSS媒體查詢這里的運行比較： HTTP：//blog.restive .IO /職位/ 4887492 / CSS媒體查詢-VS-動盪，插件
針對您的特定情況的安裝和設置為：
<!-- Install JQuery version 1.7 or higher -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- Install Restive Plugin -->
<script type="text/javascript" src="restive.min.js"></script>
<!-- Setup Plugin -->
<script>
$( document ).ready(function() {
$('body').restive({
breakpoints: ['250', '320', '480', '620', '710', '940'],
classes: ['rp_250', 'rp_320', 'rp_480', 'rp_620', 'rp_710', 'rp_940'],
turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet',
force_dip: true
});
});
</script>
breakpoints和classes管理您的斷點以及隨后向DOM添加的類。 因此，如您所見，Restive插件將創建以下斷點范圍： 0 to 250 251 to 320 320、321 321 to 480 481 to 620 621 to 710和711 to 940 。 然后，當移動設備匹配所述斷點時，它將在classes添加相應的值。
因此，如果iPhone 3GS訪問您的網站，則rp_320將被添加到<body>標記的class屬性中（因為該設備的視口寬度為320像素，因此）。
turbo_classes是Restive插件的一項特殊功能，它將在滿足特定條件的情況下將類添加到<body>標記中。 因此，如果設備is_mobile ，它將添加mobi ；如果設備is_phone ，它將添加phone ，依此類推。 您可以從Restive插件文檔中獲得更多深入的信息
force_dip強制Restive插件使用獨立於設備的像素作為breakpoints （默認行為是使用設備像素），以便將iPhone3GS （像素比為1）和iPhone 4S （像素比為2）捕獲到相同的像素。斷點，即251 to 320 ，這是CSS Media Queries會做的。
因此，在上述設置中，如果設備是iPhone 4S或iPhone 3GS ，則Restive插件會將mobi phone rp_320添加到<body>標簽的class屬性中。
安裝和設置后，您要做的所有其他操作都是純CSS，無需媒體查詢。
因此，如果您想為251 to 320斷點捕獲的設備做一些事情，只需將其添加到CSS文件中即可，例如，菜單欄容器：
.mobi.rp_320 .menuBarContainer {display: none;}
這將隱藏該斷點內任何設備的菜單欄。
但是，您還可以進行更廣泛的操作，例如在所有電話上隱藏菜單欄容器（啟用了turbo_classes功能）：
.mobi.phone .menuBarContainer {display: none;}
您也可以為平板電腦做類似的事情：
.mobi.tablet .menuBarContainer {display: none;}
現在，您可以自由地使用純CSS來構建網站和設置復雜的行為安排，而不必擔心@media查詢。 Restive插件在... errmm ...前端中對您有很多幫助？
可能需要適應不同的思維方式，但將來可能會幫助您在構建響應式網站時更加敏捷。
全面披露 ：我開發了插件。
CSS媒體查詢 - 不工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.