メディアクエリを使用せずに要素の幅を変更するにはどうすればよいですか？

Question

私は大画面であまりにも広がって見える段落の束を持つページを持っています。だから私は幅を設定する：600pxをp。それはそれを美しく見せました。

小さな画面では、段落はまだ600pxです。

メディアクエリを使いこなすことなくこれを回避する方法はありますか？

要するに、.pには幅：600pxが必要です。大画面では600px未満の幅設定はありません。

Answer 1

あなたは以下のスニペットのようなmax-widthを使用することができます：あなたが記述しているもの

div { 
 
    width:100%; 
 
    max-width:400px; 
 
    }

<div>I have a page with a bunch of paragraphs, which look too stretched out on large screens. So I set width: 600px to p. Which made it look nice.</div>

Answer 2

この場合、jQueryを使用できます。

if ($(window).width() < 1000) { 
    $("p").css("width","400"); 
} 
if ($(window).width() < 1000) { 
    $("p").css("width","600"); 
} 

あなたの希望に応じて番号を変更することができます。

編集：上記のコメントのとおり、Bootstrapフレームワークを使用せずにメディアクエリを使用できます。

Answer 3

@Sandip Subediが上記のようにjQueryを使用するよりも、メディアクエリーを設定するのにそれ以上の努力は必要ありません。それは好みの問題です。

あなたは、単に必要なあなたのCSSで

：

画面が広い600PXよりも大きい場合、固定600PXにあなたのpを設定します

p { width: 600px; } 
@media (max-width < 600px) { 
    p { width: 100%; } 
} 

、その後、メディアクエリは、pが小さいものの上に幅の広い100％することができます。