JavaScriptで動的に設定されるPHP変数を使用したHTMLイメージのレイアウト[ 。 。]

Question

"O"はHTMLページ上のイメージを表します。ここに私のHTMLページには、Xは、ピクセルの特定の数である画面サイズ> X、上にある：

OOOO

OOOO

OOOO

あり、あると言う、12画像;しかし、スクリーンサイズ≤Xに見たとき、私たちは得られるはずです。

OO

OO

OO

OO

OO

OO

ページには、次のようにPHPを使用しています。

<?php 
    $images = glob("images/*.jpg"); 
    foreach($images as $image){ 
     <!-- <img...width:25%;display:inline-block;.../> --> 
    } 
?> 

私は、ビューポートがXを≤か> Xされているかどうかに依存する変数、このパーセントに「25」をしたいと思います。例えば、> Xの場合はw1、Xの場合はw2です.JavaScriptを使用せずにこれを行う方法はありますか？私はJavaScriptの回答を受け入れます。

---

は「...は、」より多くの存在があることを意味しますが、私はここでそれを示していませんよ。

Answer 1

あなたが望むものを達成するためにCSSメディアクエリを使用することができます。

/* default values */ 
img.class-name { 
    width: 25%; /* whatever your default value is */ 
} 

@media (min-width: YYpx) { 
    img.class-name { 
    width: 50%; /* value when the screen is at least YY px wide */ 
    } 
} 

メディアクエリーはIEのみでサポートされている9+

Answer 2

を最小px又は他のユニットの値にcsswidthセットを使用してみてくださいプラス15vw~25vwとなります。 25vh

body { 
    width:100%; 
    height: 100%; 
    padding:4px; 
} 

img { 
    display:inline-block; 
    width:calc(50px + 15vw); 
    height:25vh; 
    border: 1px solid #000; 
    padding:4px; 
} 

jsfiddle https://jsfiddle.net/wgjvq3b9/