有没有办法根据浏览器、屏幕或文本容器自动调整文本大小？（不取决于设备，因为这不是一个好的做法）。
并且无需 CSS 3 媒体查询的帮助！不使用媒体查询会很棒，因为代码会更少，并且通常您必须使用较旧的浏览器的回退来理解媒体查询。
我知道有一种方法可以设置相对大小，但是自动调整大小的大小怎么样？我尝试过font-size:auto;，font-size:120%但是如果我向下拉伸浏览器窗口，大小是相同的。
我对 JavaScript 知之甚少，所以我什至不确定我的问题是否有意义。然而，我的观点是如何应用相同的媒体查询原理来根据屏幕的宽度更改脚本上的特定值。
在下面的示例中，我使用滚动间谍活动菜单，并使用 -100px 的负滚动来进行标题补偿。此偏移是必要的，因为标头具有固定位置。
如果窗口小于 900px 宽度，我需要将偏移值更改为 0px，因为此时，标题位置变得相对。
$(document).ready(function () {
$(window).scroll(function () {
var y = $(this).scrollTop();
$('.link').each(function (event) {
if (y >= $($(this).attr('href')).offset().top - 100) {
$('.link').not(this).removeClass('active');
$(this).addClass('active');
}
});
});
});
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top - 100)
}, 850);
return false; …我正在创建新网站。我的目的是为桌面和移动设备创建一个页面，并根据设备（移动设备或桌面设备）设置样式。我知道我可以用纯 JavaScript 实现一切，但我也想使用 CSS 和媒体查询。我的问题是：如何使用 CSS 媒体查询仅为移动设备设置样式？我试图使用：
@media only screen{
style...
}
但它适用于移动和桌面浏览器。
我使用单独的 CSS 文件制作了一个网站，现在我想将它们组合起来。问题是我不能简单地将所有内容复制/粘贴到 1 个文件中，因为我的媒体查询具有不同的 html、h1、h2、h3 值。
有没有办法让媒体查询指定一个页面，让它只选择主页的html和h1，而不改变联系页面的html和h1？
编辑：这是一个 Wordpress 自定义模板，因此所有页面将共享相同的标题和 html 开始标记。
例子：
我将如何合并这两个文件？
索引.css：
html {
font-size: 16px;
}
h1 {
font-size: 1.5rem;
}
@media only screen and (min-device-width: 700px) {
html {
font-size: 17px;
}
h1 {
font-size: 2rem;
}
}
联系方式.css：
html {
font-size: 18px;
}
h1 {
font-size: 1rem;
}
@media only screen and (min-device-width: 700px) {
html {
font-size: 19px;
}
h1 {
font-size: 1.5rem;
}
}
在 HTML 中放置媒体查询的最佳方式是什么？
在同一个 CSS 文件中，例如：
.my-text {
font-size: 30px;
}
@media only screen and (max-width : 768px) {
.my-text {
font-size: 24px;
}
}
.my-img {
width: 100%;
}
@media only screen and (max-width : 768px) {
.my-img {
width: 80%;
}
}
{more styles...}
@media only screen and (max-width : 768px) {
{more styles...}
}
或者在相同的 CSS 中，但像：
.my-text {
font-size: 30px;
}
.my-img {
width: 100%;
}
{more code....}
@media only screen and (max-width : 768px) { …https://codepen.io/everybodysfeelingwonderland/full/OjyRpM/
不知何故，我无法在媒体查询中为较小的屏幕尺寸更改导航链接的颜色。它应该变成白色，但对于更大的屏幕，它只是保持灰色。
@media all and (max-width: 580px) {
nav li a,
nav ul li {
color: white;
text-align: right;
display: block;
}
}
nav li a {
text-decoration: none;
color: #666666;
font-size: 20px;
}
我正在创建一个网站，并成功地使用外部 CSS 文件为移动和桌面样式创建了媒体查询。您可以看到下面链接到外部工作表的 HTML；mobile.css 用于<767px 的设备，desktop.css 用于>768px 的设备。
<head>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" media="screen and (max-width: 767px)" href="css/mobile.css" />
<link rel="stylesheet" media="screen and (min-width: 768px)" href="css/desktop.css" />
</head>
设计了这个网站后，我相信我可以让它更具响应性，并希望将 desktop.css 更改为 tablet.css 并为超过 1000px 的设备创建一个新的 desktop.css。但是，将以下外部 CSS 与媒体查询链接起来不起作用：
<head>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" media="screen and (max-width: 767px)" href="css/mobile.css" /> <!-- This works fine -->
<link rel="stylesheet" media="screen and (min-width: 768px)" href="css/tablet.css" /> <!-- This works fine -->
<link rel="stylesheet" media="screen and (min-width: …我试图在 iMac 5k 显示器(5120 \xc3\x97 2880)上显示基于八列网格的Flexbox，但我无法理解我仅用于 5K 分辨率的媒体查询！
\n\n@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { \n/* Retina-specific stuff here */\n}\n我也希望只有 5K 分辨率才会有效果，而且在 4k 显示分辨率下它的显示符合我的预期
\n世界各地的纸张形状不尽相同。我有一个文档，当它打印在 A4 和 US Letter 上时，我想以不同的方式打印。一些元素应该隐藏或显示。显而易见的建议是使用媒体查询，如下所示：
@media print and (max-height: 280mm) {
.a4-only {
display: none;
}
}
但是，这似乎不起作用，大概是因为它使用的是总文档高度或一些不相关的窗口高度而不是页面高度。
有没有办法准确解决页面大小？
有没有一种简单的方法可以在不影响桌面设备的情况下定位横向移动设备，而无需输入每个设备的屏幕尺寸？
如果没有，是否有针对大多数用户的单一最佳解决方案？
现在移动屏幕的分辨率可以等于或高于大多数桌面屏幕，我不明白为什么许多人使用低于 640x480 的分辨率规则。
例如，要定位纵向设备（99% 是移动设备），可以将规则写入
/*Global and desktop rules*/
@media only screen and (orientation: portrait) {
/*Mobile overwrites*/
}
但是，相同的查询orientation: landscape也会影响桌面用户。
我的临时解决方法是使用vw,vh和vmin，但我想知道是否有更好的方法。
请问一个mobileCSS媒体简化Web开发人员的工作？