移动端网站base标签跳转失效及字体大小设置问题咨询

嘿，这俩都是前端开发里常踩的坑，我帮你逐一拆解：

问题1：<base href>移动端“重定向”失效的真相 #

首先得纠正一个关键误解：<base href>根本不是用来做域名跳转的！

它的核心作用是定义页面内所有相对URL的基准路径——比如你页面里写了<a href="/about">，加上<base href="http://www.myexample.com">后，这个链接会指向http://www.myexample.com/about，但它完全管不了你在地址栏输入myexample.com时的跳转逻辑。

那为什么桌面端输入裸域名能跳转到www？大概率是你的服务器/CDN配置了301/302重定向规则（比如Nginx的rewrite、Apache的.htaccess），而移动端没生效的可能原因有这些：

• 重定向规则只针对桌面端User-Agent做了适配，漏掉了移动端UA；
• 移动端浏览器缓存了旧的DNS或重定向记录，试试用隐私模式测试或者清空缓存；
• 部分移动端浏览器默认会跳转到m.子域名（如果你的服务器配置了移动端站点），导致你误以为重定向失效；
• 重定向规则只适配了HTTP协议，而移动端可能默认走HTTPS（你的HTTPS配置没同步重定向规则）。

解决办法 #

修改服务器的重定向配置，确保规则全局生效（不区分设备），比如Nginx的示例配置：

server {
    listen 80;
    listen 443 ssl;
    server_name myexample.com;
    # 同时兼容HTTP和HTTPS
    return 301 https://www.myexample.com$request_uri;
}

问题2：媒体查询修改h1字体不生效的排查方案 #

你遇到的情况，大概率是这几个原因之一：

1. 没加viewport元标签（最常见！） #

移动端浏览器默认会把页面视口宽度模拟成980px左右（适配桌面），如果没加viewport标签，你的媒体查询（比如针对max-width:768px）永远不会触发。必须在<head>里添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 媒体查询语法不完整 #

你写的@media only screen and...后面缺失了关键的屏幕条件（比如宽度阈值），正确的写法应该是：

/* 桌面端样式 */
.index-title h1 {
    font-size: 72px;
}

/* 移动端样式（屏幕宽度≤768px时生效） */
@media only screen and (max-width: 768px) {
    .index-title h1 {
        font-size: 24px;
    }
}

注意：only screen是可选的，但必须跟上括号里的条件（比如max-width或min-width）。

3. CSS优先级被覆盖 #

如果你的媒体查询样式写在原样式之前，或者选择器权重不够，会被原样式覆盖。比如原样式是body .index-title h1，那媒体查询里的.index-title h1权重更低，需要保持相同权重，或者临时用!important（不推荐长期使用）：

@media only screen and (max-width: 768px) {
    .index-title h1 {
        font-size: 24px !important;
    }
}

4. 拼写或选择器错误 #

检查类名是否正确（比如是不是.index-title还是.index-title-wrap），或者用浏览器开发者工具（F12）查看h1元素的样式面板，看你的媒体查询样式是不是被划掉了（说明被其他样式覆盖）。

内容的提问来源于stack exchange，提问作者Peterr