Media Query未生效？平板端calc设置的margin-left边距未显示排查

左右边距没生效，是你写的CSS值完全不符合语法规范，浏览器直接判定为非法、丢弃了整条margin声明，和media query的加载逻辑没有关系。

具体错误点 #

• 你现在写的代码里，calc的作用域、单位位置完全错了：

  margin-right: (calc(39/768*100)%);
  margin-left: (calc(39/768*100)%);
  

  第一个问题：百分号%被放到了calc()函数的闭合括号外面，calc本身只计算出了无单位的纯数值，你还在函数外额外套了一层圆括号，把%接在括号外面，浏览器根本解析不出合法的长度值，直接放弃应用这条规则。
  第二个问题：你之前提到的预期写法margin-left: (calc (39/768*100))% 更不对——calc和后面的计算块之间留了空格的话，浏览器会直接把“calc”识别成普通的文字标识，根本认不出这是需要执行计算的函数。
• 你的media query绑定逻辑本身是正常的：当视口处于640px-1023px的平板区间时，tablet.css会被正常加载，不存在文件不生效的问题。

所有计算逻辑、单位必须全部放在calc()的括号内部，不要在函数外额外套圆括号，同时符合calc的书写规范：

.globalcontainer {
  margin-top: 0;
  margin-right: calc(39 / 768 * 100%);
  margin-bottom: 0;
  margin-left: calc(39 / 768 * 100%);
}

补充注意事项 #

• calc()内部的加减乘除运算符两侧必须留空格，否则部分浏览器会解析失败
• 不要在calc外部单独套圆括号包裹表达式，CSS没有这种语法
• 修正语法后，左右边距会按照“768px宽度下39px边距”的比例，自动适配所有平板视口宽度，不会出现固定像素的错位问题

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