CSS width与屏幕宽度有什么区别？如何设置手机端媒体查询max-width？

两个宽度的定义区别 #

• screen width（屏幕宽度）：指设备屏幕的物理像素宽度，是屏幕硬件层面实际拥有的发光像素点总数，比如常见的1080P手机横向物理像素为1080，这个数值就是它的screen width。
• CSS width：指逻辑像素宽度（设备独立像素），是浏览器做像素换算后提供给CSS读取的宽度，换算公式为 CSS宽度 = 物理像素宽度 / 设备像素比（DPR）。目前手机的设备像素比普遍在2~3之间，所以CSS宽度会比物理宽度小很多，比如物理宽度1080px、DPR为3的手机，CSS宽度就是360px。

媒体查询max-width参数设置方法 #

1. 先配置基础viewport元标签
   必须在HTML的head标签内插入以下代码，否则浏览器会默认按980px的桌面宽度渲染页面，媒体查询完全不会生效：

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

2. 优先使用通用断点，无需硬卡单个设备数值
   目前行业通用的移动端断点参考：

• 小屏手机：max-width: 375px
• 常规手机竖屏：max-width: 767px
• 手机横屏/平板竖屏：768px ~ 1023px
  如果没有特殊的小屏适配需求，直接用max-width: 767px作为移动端媒体查询的判断条件，即可覆盖绝大多数手机竖屏场景。

3. 精准调试直接用浏览器开发者工具
   Chrome、Edge等浏览器的F12开发者工具都自带移动端模拟功能，选择对应设备后会直接显示当前的CSS逻辑宽度，你可以直接根据显示的数值调整断点，不需要额外查参数。

示例代码优化 #

你给出的代码逻辑存在瑕疵：当媒体查询触发（页面宽度≤400px）时，给元素设置固定400px宽度，在小于400px的设备上会出现横向滚动条，建议调整为：

@media screen and (max-width: 400px) {
  .medd_article {
     width: 100%;
     max-width: 400px;
  }
}

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