地图铺满整个视口宽度(批 18)
反馈:界面宽度是固定的(正文版心 1080px 居中),地图也被框在这一条里。
按用户选择:**只让地图突破版心、占满整屏**,列表与文字仍保持版心(宽屏下好读)。
- 首页「旅行地图」与详情页「行程路线」都铺满整个视口宽度,
高度改成 `clamp(460px, calc(100vh - 190px), 1000px)` —— 屏幕越大容器越大,
地图显示的地理范围也越大(AMap 填满容器 + fitView 按当前视野重算),
等于跟着分辨率自动缩放。
- 改窗口大小 / 旋转屏幕时:重算出量 → `map.resize()` → 重新适配视野并重排标记
(200ms 防抖)。
🔴 出血量为什么由 JS 给(模板里的 `bleed()`):
版心留白是 `max(gutter, (100% - 1080px)/2)`,**自定义属性里的 100% 是在「使用它的
那个元素」上解析的** —— 把它取负直接写在地图元素(它在版心内部,宽 1080)上,
算出来只有 -gutter,实测地图只铺到 1128/1440。
所以改成读 container 实际渲染出来的 `padding-left` 再取负。
也不写 `width: 100vw`:它含滚动条宽度,会让整页横向溢出。
验证:两条几何断言钉住「铺满」+「不溢出」(详情页 18 项 / 首页 29 项),
首页还逐档改视口(390 / 768 / 1280 / 1920 / 2560)各量一次 —— 是真的改视口,
不是只看默认尺寸。另重抓了一次线上快照,用工作树 CSS 跑布局几何检查 385 项。
本地全链 13 步全绿(渲染检查 372 项);远端 e2e 365 项 0 失败;
部署静态断言 213 条 0 FAIL、双 PHP 渲染逐字节一致、内容断言全过。
This commit is contained in:
+25
-4
@@ -1334,9 +1334,6 @@ video.video-thumb.video-thumb-mini {
|
||||
.loc-detail { margin-top: 6px; font-size: 12.5px; word-break: break-all; }
|
||||
|
||||
/* ── 22. 首页:旅行地图 + 活动列表两个标签页(批 16)───────────── */
|
||||
/* 首页的地图是主视图,比详情页那张再高一点 */
|
||||
.home-map { height: clamp(520px, 78vh, 920px); }
|
||||
|
||||
/* 一次旅行一枚图标:圆形(有封面放封面,没有放 📍)+ 下面一行活动名 */
|
||||
.home-marker-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
|
||||
.home-marker {
|
||||
@@ -1398,5 +1395,29 @@ video.video-thumb.video-thumb-mini {
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.act-row { grid-template-columns: 104px 1fr; gap: 12px; padding: 10px; }
|
||||
.home-map { height: clamp(420px, 62vh, 620px); }
|
||||
}
|
||||
|
||||
/* ── 23. 地图铺满整屏(批 18)──────────────────────────────────────────── */
|
||||
/* 行程路线 / 旅行地图:**突破正文版心,占满整个视口宽度**;
|
||||
高度跟着视口高度走 —— 屏幕越大容器越大,地图显示的地理范围也越大
|
||||
(AMap 填满容器,fitView 按当前视野重算,等于跟着分辨率自动缩放)。
|
||||
⚠️ 左右出血的 margin **由 JS 给**:版心留白是 `max(gutter, (100% - 1080px)/2)`,
|
||||
而这个 100% 在**使用它的元素**上解析 —— 直接写「负的版心留白」在地图元素上
|
||||
算出来只有 -gutter(实测 156px vs 该有的 180px),铺不满。
|
||||
所以改成读 container 实际渲染出来的 padding-left 再取负(见模板里的 bleed())。
|
||||
⚠️ 更不能写 `width: 100vw`:它含滚动条宽度,会让整页横向溢出。
|
||||
⚠️ 已经贴着视口边缘了,就不要左右边框和圆角了(看着才像一整屏)。 */
|
||||
#home-panel-map .route-map,
|
||||
#route-panel-map .route-map {
|
||||
height: clamp(460px, calc(100vh - 190px), 1000px);
|
||||
border-radius: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
/* 地图下面那句说明:跟着一起出血,只留一个 gutter
|
||||
(不然会孤零零悬在离地图左边缘很远的地方) */
|
||||
#home-panel-map .route-map-hint,
|
||||
#route-panel-map .route-map-hint {
|
||||
padding-left: var(--gutter);
|
||||
padding-right: var(--gutter);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user