cqfill实现容器查询右侧宽度固定左侧宽度自适应效果代码
代码语言:html
所属分类:响应式
代码描述:cqfill实现容器查询右侧宽度固定左侧宽度自适应效果代码
代码标签: 查询 右侧 宽度 固定 左侧 宽度 自 适应 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400&family=Montserrat:wght@400;700&display=swap"); :root { --color-primary: #007a79; --color-secondary: #074487; --color-bg: #c7cedf; --font-primary: "Montserrat", sans-serif; --font-secondary: "Courier Prime", serif; } body { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 0.5rem; grid-template-areas: "head head head" "main main side" "foot foot foot"; grid-template-rows: 1fr 3fr 1fr; grid-template-columns: 1fr 1fr 300px; height: 100vh; } aside { background-color: orange; grid-area: side; } header { grid-area: head; } footer { grid-area: foot; } aside, header, footer { background-color: var(--color-bg); font-family: var(--font-primary); font-size: 1.25rem; display: grid; padding: 1rem; place-items: center; } main { background-color: var(--color-bg); grid-area: main; padding: 20px; --css-contain: layout inline-size; contain: layout inline-size; inline-size: auto; } .header-heading { font-size: 1.75rem; } .cards-heading { color: var(--color-primary); font-family: var(--font-primary); text-transform: uppercase; } .card { background-color: white; border: none; display: block; margin-bottom: 1.25rem; padding: 1rem; } .card .card-heading { font-family: var(--font-primary); margin-left: 5px; text-transform: uppercase; } .card p { font-family: var(--font-secondary); } .card-img { aspect-ratio: 16/9; background-color: var(--color-primary); width: 100%; } .card-body { display: flex; flex: 1; flex-direction: column; margin-left: 1rem; } @media --css-container and (min-width: 600px) { .card-img { background-color: var(--color-secondary); width: 50%; } .card { display: flex; } } @container (min-width: 600px) { .card { display: flex; } .card .card-img { background-color: var(--color-secondary); width: 50%; } } @media --css-conta.........完整代码请登录后点击上方下载按钮下载查看
网友评论0