移动端适配方案

rem等比适配

xiaomi商城触屏版使用的就是这个方案

  1. 统一视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  1. 一般UI设计稿都是按照750px设计。假设一个元素的宽度是375px,那么按照比例,这个元素在任何宽度的设备都应占整体宽度的1/2。
  2. 设置html元素的font-size,一般为设备宽度的1/10。
function resetHtmlFont() {
  // 获取html对象
  document.documentElement.style.fontSize = screen.width / 10 + 'px'
}

resetHtmlFont()
window.onresize = resetHtmlFont
  1. 元素的大小计算 使用750像素宽度的ui稿
originPx / (750 / 10) + 'rem' 可以在ide安装自动转换的插件

弊端

可读性比较差 ,一般保留px源码,通过构建工具转换。

媒体监听适配

不是等比缩放,是布局在不同设备上合理的表现。

  1. 统一视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  1. 一般移动端划分可按照750px
@media screen and (max-width: 750px) {
  // 移动端样式可在这里进行编写或覆盖
}

vw,vh方案

vw为比例单位,1vw为窗口的1%,实现方案原理和rem方案差不多。

浙ICP备2023004975号-2
浙公网安备33011002017713号