max-width支持-webkit-前缀吗？移动端如何设置div最大宽度？

1. max-width属性是否需要-webkit-前缀？ #

• max-width是CSS标准属性，不需要添加-webkit-前缀。前缀仅用于浏览器尚未完全支持的实验性属性，而max-width早已被所有现代浏览器（包括移动端WebKit内核的Safari、Chrome等）完全支持，添加前缀反而会导致样式失效，你写的max-width: -webkit-100px;属于错误写法，无法被浏览器识别。

2. 移动端为.test类div设置max-width的正确方法 #

要实现仅在移动端生效的样式，最可靠的方式是使用CSS媒体查询，根据屏幕宽度限定样式的生效范围。以下是具体实现方案：

正确CSS代码 #

/* 桌面端默认样式（可选，不需要可留空） */
.test {
  /* 桌面端样式 */
}

/* 移动端专属样式（屏幕宽度≤768px时生效，可根据需求调整阈值） */
@media (max-width: 768px) {
  .test {
    max-width: 100px;
  }
}

补充说明 #

• 媒体查询@media (max-width: 768px)是通用的移动端判定规则，覆盖大部分手机和平板设备；若需适配特定小屏设备，可将阈值调整为375px、480px等。
• 务必在HTML的<head>标签中添加视口元标签，确保移动端浏览器正确识别屏幕宽度，避免样式缩放异常：

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

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