搜索到
9
篇与
的结果
-
制作网页网站必学，CSS单位详解：rem、em、vw、vh。 CSS单位详解：rem、em、vw、vh * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); color: #333; line-height: 1.6; padding: 20px; min-height: 100vh; } .container { max-width: 1400px; margin: 0 auto; } header { background: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 20px 30px; margin-bottom: 30px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } h1 { font-size: 2.8rem; color: #1a2a6c; margin-bottom: 5px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .subtitle { font-size: 1.3rem; color: #555; max-width: 700px; } .resolution-info { background: rgba(26, 42, 108, 0.85); color: white; padding: 15px 25px; border-radius: 10px; min-width: 300px; text-align: center; } .resolution-info h3 { font-size: 1.3rem; margin-bottom: 8px; } .resolution-value { font-size: 1.8rem; font-weight: bold; color: #fdbb2d; } .content { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 40px; } .explanation { flex: 1; min-width: 300px; background: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 30px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .demo-area { flex: 1; min-width: 300px; background: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 30px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } h2 { color: #1a2a6c; margin-bottom: 25px; font-size: 2rem; text-align: center; padding-bottom: 15px; border-bottom: 3px solid #fdbb2d; } .unit-table { width: 100%; border-collapse: collapse; margin-top: 20px; } .unit-table th { background-color: #1a2a6c; color: white; padding: 15px; text-align: left; } .unit-table td { padding: 15px; border-bottom: 1px solid #ddd; } .unit-table tr:nth-child(even) { background-color: #f9f9f9; } .unit-table tr:hover { background-color: #f1f5ff; } .unit-box { height: 120px; display: flex; align-items: center; justify-content: center; margin: 25px 0; border-radius: 8px; color: white; font-weight: bold; font-size: 1.2rem; text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; } .unit-box span { background: rgba(0, 0, 0, 0.6); padding: 5px 10px; border-radius: 4px; } .rem-box { background: linear-gradient(45deg, #1a2a6c, #3a56c5); width: 15rem; } .em-box { background: linear-gradient(45deg, #b21f1f, #e84a4a); width: 15em; } .vw-box { background: linear-gradient(45deg, #006400, #00aa00); width: 30vw; } .vh-box { background: linear-gradient(45deg, #8B4513, #cd853f); height: 15vh; width: 100%; } .controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; padding: 20px; background: #f0f5ff; border-radius: 10px; } .control-group { display: flex; flex-direction: column; } .control-group label { margin-bottom: 8px; font-weight: bold; color: #1a2a6c; } .control-group input { padding: 10px; border: 2px solid #1a2a6c; border-radius: 6px; font-size: 1rem; } .use-cases { background: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 30px; margin-bottom: 30px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .case-container { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 25px; } .case { flex: 1; min-width: 300px; padding: 25px; background: #f0f5ff; border-radius: 10px; border-left: 5px solid #1a2a6c; } .case h3 { color: #1a2a6c; margin-bottom: 15px; font-size: 1.5rem; display: flex; align-items: center; } .case h3 i { margin-right: 10px; color: #b21f1f; } .case p { margin-bottom: 15px; line-height: 1.8; } .case-code { background: #1a2a6c; color: #fdbb2d; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 1.1rem; overflow-x: auto; } footer { text-align: center; padding: 25px; color: white; font-size: 1.1rem; margin-top: 20px; } .responsive-text { font-size: clamp(1rem, 2vw, 1.3rem); color: #333; margin: 20px 0; text-align: center; font-style: italic; } @media (max-width: 768px) { header { flex-direction: column; text-align: center; gap: 20px; } .resolution-info { width: 100%; } h1 { font-size: 2.2rem; } } CSS单位详解 rem、em、vw、vh的区别与应用场景 当前分辨率 1920 × 1080 单位特性对比 单位 基于 特点 响应式 rem 根元素(html)字体大小 相对于基准值，不受父元素影响 优秀 em 当前元素字体大小 受父元素字体大小影响 良好（需注意继承） vw 视口宽度的1% 直接与视口宽度关联 极佳 vh 视口高度的1% 直接与视口高度关联 极佳 提示：调整浏览器窗口大小或使用下方控制面板，观察各单位的响应变化 单位效果演示 rem 单位 (15rem = 15 × 根字体大小) em 单位 (15em = 15 × 当前字体大小) vw 单位 (30vw = 30% 视口宽度) vh 单位 (15vh = 15% 视口高度) 根字体大小 (px): 元素字体大小 (px): 实际应用场景 rem - 字体与间距 使用rem设置字体大小和间距，确保整个设计比例一致。只需更改根字体大小即可全局调整比例。 html { font-size: 16px; } h1 { font-size: 2.5rem; } /* 40px */ p { margin-bottom: 1.5rem; } /* 24px */ vw/vh - 全屏元素 创建全屏区域、保持宽高比或设置与视口相关的尺寸，如图片轮播、英雄区域等。 .hero-section { width: 100vw; height: 100vh; } .banner { font-size: 5vw; /* 响应式字体 */ } em - 相对间距 在组件内部使用em设置内边距、外边距等，使间距与组件字体大小成比例变化。 .card { font-size: 18px; padding: 1.5em; /* 27px */ } .card-title { margin-bottom: 0.8em; /* 基于自身字体大小 */ } CSS单位详解 © 2023 | 响应式设计示例 // 更新分辨率显示 function updateResolution() { const resolutionElement = document.getElementById('resolution'); resolutionElement.textContent = `${window.innerWidth} × ${window.innerHeight}`; } // 初始化 window.addEventListener('load', () => { updateResolution(); // 设置根字体大小 const rootFontInput = document.getElementById('root-font'); rootFontInput.addEventListener('input', function() { document.documentElement.style.fontSize = this.value + 'px'; }); // 设置元素字体大小（影响em单位） const elementFontInput = document.getElementById('element-font'); elementFontInput.addEventListener('input', function() { const emBox = document.querySelector('.em-box'); emBox.style.fontSize = this.value + 'px'; }); }); // 监听窗口大小变化 window.addEventListener('resize', updateResolution); -
Windows 10 22H2官方原版 + LTSC_2021_集成25年7月最新补丁 Windows 10 22H2 + LTSC_2021_集成25年7月最新补丁123云盘注册，2T超大容量！下载不限速 ：https://login.123pan.com/centerlogin?register=invite&ref=v8OiTdWin10_LTSC_2021:没有添加任何三方数据，集成到25年7月最新补丁，母本选用 LTSC 2021 或 其它官方 ISO 制作。使用工具只有 DISM，没有删减任何内容，完全原版。系统映像为 ESD 格式。下载地址：隐藏内容，请前往内页查看详情Win10_22H2官方原版7月更新：微软官方原版系统简体中文消费者版2025年7月版（含家庭版、家庭单语言版、教育版、专业版、专业教育版、专业工作站版）64位版本：Windows 10 (consumer editions), version 22H2 (updated July 2025) (x64) - DVD (Chinese-Simplified)下载地址：隐藏内容，请前往内页查看详情简体中文商业版2025年7月版（含企业版、专业版、教育版、专业教育版、专业工作站版）64位版本：Windows 10 (business editions), version 22H2 (updated July 2025) (x64) - DVD (Chinese-Simplified)下载地址：隐藏内容，请前往内页查看详情关于j活为保持系统纯净，系统安装后未J活！！！J活工具:https://www.123912.com/s/v8OiTd-fzpUA?pwd=fRTg# 提取码:fRTg
-
Windows 7 旗舰版 专业版 企业版 + Server2008R2DataCenter 7合1 最终收藏版 Windows 7 旗舰版 专业版 企业版 + Server2008R2DataCenter 7合1 收藏版1. 更新内容： 集成 2025年7月 前所有补丁2. 关于j活： 为保持系统纯净，系统安装后未J活！！！J活工具:https://www.123912.com/s/v8OiTd-fzpUA?pwd=fRTg# 提取码:fRTg3. 关于驱动： 注意：Windows 7 原版安装完后默认没有网卡驱动，无法联网，因此安装系统前，请下载好离线万能网卡驱动安装工具，放到U盘备用。 默认已集成部分USB3和NVme驱动，由于USB3驱动是精确匹配，可能找不到合适你的USB3驱动，造成安装失败或者安装成功后鼠标键盘无法使用。123云盘注册，2T超大容量！下载不限速 ：https://login.123pan.com/centerlogin?register=invite&ref=v8OiTd 4. 镜像下载： 隐藏内容，请前往内页查看详情万能驱动：https://pan.xunlei.com/s/VOSqbVmh-iG8R-TeDBPqlq5AA1（提取码：jpmz）记得取消勾选软件推荐和右上角网站导航即可纯净安装!
-
