0
メディアクエリとブラウザのズーム使用：一貫性のないフォントサイズ、私は次のHTMLページを作成しました
私がbroswerのデフォルトの手順を使用して、100％から500％にズームイン
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width" />
<style>
@media only screen and (max-width: 320px)
{
.text
{
font-size:0.3em;
}
}
@media only screen and (min-width: 321px) and (max-width: 480px)
{
.text
{
font-size:0.6em;
}
}
@media only screen and (min-width: 481px) and (max-width: 600px)
{
.text
{
font-size:0.9em;
}
}
@media only screen and (min-width: 601px) and (max-width: 768px)
{
.text
{
font-size:1.2em;
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px)
{
.text
{
font-size:1.5em;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1200px)
{
.text
{
font-size:1.8em;
}
}
@media only screen and (min-width: 1201px)
{
.text
{
font-size:2em;
}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="text">
text text text text
</div>
</form>
</body>
</html>
（100 ％、110％、125％、...）では、最初の数ステップでフォントサイズが大きくなり、次のステップでは一貫性のない方法でフォントサイズが小さくなります。これはすべての主要なブラウザで起こる： - クロム51.0.2704.103 - すなわち11 - Firefoxの43.0.1 任意のヘルプは おかげ
回答をいただきありがとうございます。メディアクエリの目的は、ブレークポイントを作成し、ページをデスクトップ上のウィンドウのサイズ変更に対応させることですが、問題はブラウザのズーム機能がメディアとうまく機能しないことですクエリは、JavaScriptを使用せずに両方を達成する方法はありますか？ – Sagi
ズーム機能は、メディアクエリで*意図した通りに機能します。 CSS 'px'ユニット**はスクリーンピクセル**ではなく、拡大によって拡大または縮小される可変サイズの抽象点であることを忘れないでください。 – Kornel
私はそれが定義でうまく動作することを理解していますが、ユーザーがフォントサイズをズームしたときに、ユーザーが予想した結果と矛盾して減少する場合、ズームイン時にユーザーが期待した結果を得る方法がありますか？ – Sagi