11

メディア クエリ (media="screen and (max-width:640px)" など) を使用して CSS を変更する方法を理解しました。

しかし、私が書きたいとしましょう（ほんの一例です）

<div>
[if screen resolution is lower then 960 px]
    <div>
    some new text only for lower resolution
    </div>
[end of condition]
</div>

それを正しくするために書く必要がある条件は何ですか？

4

7 に答える 7

8

私が経験した限りでは、HTML ページ内でメディア クエリを実行することはできません。CSS 内から行う必要があります。

しかし、特定の解像度を下回る場合にのみ特別なテキストを表示したい場合は、解像度が 960px を下回る場合にのみ表示できるようにしないのはなぜでしょうか?

レスポンシブ デザインの作成は通常のデザインとは大きく異なります。

于 2011-11-28T10:23:15.330 に答える
5

javascript screen オブジェクトを使用して確認できます。

screen.width

またはcssでこれを行うことができます

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

http://css-tricks.com/6206-resolution-specific-stylesheets/ http://www.javascriptkit.com/howto/newtech3.shtml

于 2011-11-28T10:25:06.593 に答える
3

に ID (またはクラス、または CSS から要素を見つける他の方法) を割り当てる必要があり、次の<div>ようにメディア クエリ定義を設定できます。

<div id="mydiv">...</div>
<style type="text/css">
@media screen and (min-width: 961px) {
   div#mydiv { display: none }
}
</style>

または、読みやすくするために: デフォルトでは非表示にし、場合は表示しますmax-width: 960px。

于 2011-11-28T10:24:55.310 に答える
3

私は実際に同じ状況を経験しており、これを行いたい場合は、HTML ページにすべてのテキストを実際に追加してから、表示したくない画面幅で非表示にできることがわかりました。例えば：


    <div>
    [text that will be shown for screens less or equal to 960px in width]
        <div class="smallScreen">
        some new text only for lower resolution
        </div>
    [end of condition for small screens]

    [text that will be shown for other screens that are greater in width]
        <div class="largeScreen">
        some new text only for higher resolution
        </div>
    </div>

そして、CSS を追加できます。

    /* On smaller resolutions, hide the text for Large screens */
    @media only screen and (max-width: 960px) {
        .largeScreen {display: none;}
   }

   /* On larger resolutions, hide the text for Small screens */
    @media only screen and (min-width: 960px) {
        .smallScreen {display: none;}
   }

これがうまくいくことを願っています:)

于 2020-05-01T17:57:44.880 に答える
1

jQuery画面解像度ごとに動的にスタイルを変更する機能を 追加できます。

if(screen.width==1600)
       { 
        jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -0.7%');
       }
        else if(screen.width==1280)
       { 
        jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -0.9%');
       }    
       else if(screen.width==1024)
       { 
        jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -1.1%');
       }
        else if(screen.width==800)
        { 
        jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -1.3%');
       }
于 2013-03-21T08:20:15.030 に答える
1

I could be wrong, but I think css selection by resolution would need a little help from javascript.

Here is a quick example of what that js could look like, embedded in jquery:

$(document).ready(function() {

  if ((screen.width>=1024) && (screen.height>=768)) {
   alert('Screen size: 1024x768 or larger');  
   $("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
 }
  else  {
    alert('Screen size: less than 1024x768, 800x600 maybe?');
    $("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
  }
});

Hope that helps.

于 2011-11-28T10:27:10.313 に答える