div+css实现基于容器查询自适应响应式图文卡片效果代码
代码语言:html
所属分类:响应式
代码描述:div+css实现基于容器查询自适应响应式图文卡片效果代码,拖动右下角的按钮改变大小看看container query效果。
代码标签: div css 基于 容器 查询 自适应 响应式 图文 卡片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.normalize.min.css"> <style> *, *:after, *:before { box-sizing: border-box; } body { display: grid; place-items: center; min-height: 100vh; padding: 1rem; background: var(--surface-2); font-family: 'Google Sans', sans-serif, system-ui; } main { gap: 2rem; display: grid; place-items: center; } .wrapper { resize: both; overflow: hidden; /* display: flex; */ } .wrapper > * { width: 100%; } [data-for=article] { width: 60ch; height: 300px; } [data-for=button] { resize: both; } article { /* box-shadow: var(--shadow-4); */ background: var(--surface-1); border-radius: var(--radius-3); overflow: hidden; display: grid; gap: 1rem; box-shadow: var(--shadow-3); } main { container: main / inline-size; width: 100%; } article { container: card / inline-size; grid-auto-columns: 1fr; grid-auto-rows: auto; } /* Move this to the card by having a layout that the children span based on card width */ /* @container main (min-width: 500px) { article { grid-template-columns: 1fr 1fr; } } */ article img { aspect-ratio: 16 / 9; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .card__content { padding: 1rem; display: grid; gap: 0.5rem; grid-template-rows: auto 1fr auto; text-align: left; /* grid-column: 2; */ } .button { container: action / inline-size; min-height: 44px; } @container action (max-width: 50px) { .button .button__text { display: none; } } @container action (max-width: 120px) { .button .button__text--supplementary { display: none; } } @container card (max-width: 300px) { article .card__content { grid-column: 2; } article h2 { font-size: 1rem; } article .card__content { display: flex; align-items: center; justify-content: space-between; width: 200px; padding-left: 0; gap: 1rem; } article img { max-width: 100px; } article .button:first-of-type { display: none; } article .button:last-of-type { width: 44px; aspect-ratio: 1; overflow: hidden; max-width: 44px; } article p { display: none; } article img { min-width: 50px; } } @container card (min-width: 50ch) { article .card__content { grid-column: 2; } } @container card (max-width: 50ch) { article .button:first-of-type { max-width: 48px; aspect-ratio: 1; position: absolute; top: 1rem; right: 1rem; } article .button:last-of-type { flex: 1; } } .card__actions { display: flex; gap: 1rem; } .button { display: flex; gap: 0.5rem; align-items: center; justify-content: center; padding: var(--size-2) var(--size-4); font-weight: var(--font-weight-9); } .card__actions .button { flex: 0.5; } .card__actions .button:last-of-type { background: var(--blue-6); color: var(--gray-0); } aside { display: none; padding: 1rem; gap: 1rem; align-content: start; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0