丹东网站优化,网站建设后期服务,t云建站,在政务网站建设与管理上的讲话一、移动端图片适配1、使用 img 的 srcsetimg srclogo.pngsrcsetlogo2x.png 2x,logo3x.png 3xaltLogo优点#xff1a;原生支持#xff0c;浏览器自动选择最合适的图片。2、使用媒体查询切换背景图.logo {background-ima…一、移动端图片适配1、使用 img 的 srcset
img srclogo.pngsrcsetlogo2x.png 2x,logo3x.png 3xaltLogo优点原生支持浏览器自动选择最合适的图片。2、使用媒体查询切换背景图
.logo {background-image: url(logo.png);
}media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {.logo {background-image: url(logo2x.png);background-size: contain;}
}适用场景适用于背景图或图标等需要精细控制的场景。二、适配不同屏幕大小响应式布局为了使页面在各种设备上都能良好显示应避免使用固定单位 px而采用相对单位来布局如单位说明推荐指数rem相对于根元素字体大小适合全局控制⭐⭐⭐⭐⭐vw/vh视口宽度/高度的百分之一适合全屏布局⭐⭐⭐⭐em相对于当前元素字体大小适合局部组件⭐⭐⭐三、推荐方案使用 rem JS 动态计算字号主流做法这是目前移动端开发中最常用的适配方案尤其适合以 750px 或 640px 为标准设计稿的项目。1. 设置视口 viewport
meta nameviewport contentwidthdevice-width, initial-scale1.0,maximum-scale1.0, user-scalableno2. 动态设置 HTML 根字号JS 控制
function setRem() { const baseSize 16; // 假设设计稿宽度为 750px1rem 16pxconst scale document.documentElement.clientWidth / 750;
document.documentElement.style.fontSize baseSize * Math.min(scale, 2) px;
}
window.addEventListener(resize, setRem);
setRem(); 说明通过 JavaScript 动态调整 html 的 font-size从而让 rem 的值随屏幕变化设置最大缩放比例如不超过 2 倍防止文字过大影响体验。3. 编写样式时使用 rem 单位
.container { width: 750px; /* 按照设计稿数值 */ font-size: 16px; /* 对应 1rem */ }
.title { font-size: 1.5rem; /* 实际为 24px */ } 优化建议使用 PostCSS 插件 postcss-pxtorem 可以自动将 px 转换为 rem提升开发效率配合 Vue CLI、Vite 等现代构建工具可一键完成转换。
四、备选方案使用 vw/vh 实现响应式布局适用于不需要复杂交互、结构简单的页面比如 H5 页面、营销页等。
.title { font-size: 5vw; /* 字体大小随视口宽度变化 */ }
.fullscreen { width: 100vw; height: 100vh; }优点不依赖 JavaScript实现简单直观。缺点在 iOS 上软键盘弹出会影响 vh 计算字体大小波动较大可能影响阅读体验。
五、完整的移动端适配流程总结步骤内容1️⃣ 获取设计稿明确设计稿宽度如 750px2️⃣ 设置 viewportmeta nameviewport 必不可少3️⃣ 设置 root font-sizeJS 动态设置 html 的 font-size4️⃣ 编写样式使用 rem 或 vw/vh 单位编写样式5️⃣ 多倍图处理使用 srcset 或媒体查询加载高清图6️⃣ 媒体查询优化针对特殊设备做微调如 iPad、折叠屏
