移动端适配常见方案

最新推荐文章于 2024-09-06 15:42:11 发布

坦然面对ing

最新推荐文章于 2024-09-06 15:42:11 发布

阅读量439

点赞数 1

文章标签：前端 css3 css

本文链接：https://blog.csdn.net/weixin_50049555/article/details/121108496

版权

前端开发常用单位

像素

什么是像素（Pixel）？

在前端开发中视口的水平方向和垂直方向是由很多小方格组成的，一个小方格就是一个像素。
例如：div 尺寸是 100 x 100，那么水平方向就占用100个小方格，垂直方向就占用100个小方格。

像素特点

不会随着视口大小的变化而变化，像素是一个固定的单位（绝对单位）。

百分比

什么是百分比?

百分比是前端开发中的一个动态单位, 永远都是以当前元素的父元素作为参考进行计算。
例如：父元素宽高都是 200px，设置子元素宽高是 50%，那么子元素宽高就是 100px。

百分比特点

子元素宽度是参考父元素宽度计算的。
子元素高度是参考父元素高度计算的。
子元素 padding 无论是水平还是垂直方向都是参考父元素宽度计算的。
子元素 margin 无论是水平还是垂直方向都是参考父元素宽度计算的。
不能用百分比设置元素的 border。

结论：百分比是一个动态的单位，会随着父元素宽高的变化而变化（相对单位）。

em

什么是em?

em 是前端开发中的一个动态单位，是一个相对于元素字体大小的单位。
例如：font-size: 12px; ，那么 1em 就等于 12px。

em特点

当前元素设置了字体大小, 那么就相对于当前元素的字体大小。
当前元素没有设置字体大小，那么就相当于第一个设置字体大小的祖先元素的字体大小。
如果当前元素和所有祖先元素都没有设置大小，那么就相当于浏览器默认的字体大小。

结论：em 是一个动态的单位，会随着参考元素字体大小的变化而变化（相对单位）。

rem

什么是 rem？

rem 就是 root em，和 em 是前端开发中的一个动态单位。
rem 和 em 的区别在于，rem是一个相对于根元素字体大小的单位。
例如：根元素（html） font-size: 12px; ，那么 1em 就等于 12px。

rem 特点

除了根元素以外，其它祖先元素的字体大小不会影响 rem 尺寸。
如果根元素设置了字体大小，那么就相对于根元素的字体大小。
如果根元素没有设置字体大小，那么就相对于浏览器默认的字体大小。

结论：rem 是一个动态的单位，会随着根元素字体大小的变化而变化（相对单位）。

vw vh

什么是 vw（Viewport Width）和 vh（Viewport Height）？

vw 和 vh 是前端开发中的一个动态单位，是一个相对于网页视口的单位。
系统会将视口的宽度和高度分为 100 份，1vw 就占用视口宽度的百分之一，1vh 就占用视口高度的百分之一。
vw 和 vh 和百分比不同的是，百分比永远都是以父元素作为参考。
vw 和 vh 永远都是以视口作为参考。

结论：vw/vh是一个动态的单位，会随着视口大小的变化而变化（相对单位）。

什么是vmin和vmax?

vmin：vw 和 vh 中较小的那个。
vmax：vw 和 vh 中较大的那个。
使用场景：保证移动开发中屏幕旋转之后尺寸不变。

视口

什么是视口？

视口简单理解就是可视区域大小我们称之为视口。
在PC端，视口大小就是浏览器窗口可视区域的大小。
在移动端，视口大小并不等于窗口大小，移动端视口宽度被人为定义为了 980。

为什么是980而不是其他的值？

因为过去网页的版心都是 980。
乔老爷子为了能够让网页在移动端完美的展示，所以将 iOS 手机视口的大小定义为了 980。
后来谷歌也觉得这是一个非常牛X的方案，所以 Android 手机的视口也定义为了 980。

移动端自动将视口宽度设置为980带来的问题

虽然移动端自动将视口宽度设置为 980 之后让我们可以很完美的看到整个网页。
但是由于移动端的物理尺寸（设备宽度）是远远小于视口宽度的。
所以为了能够在较小的范围内看到视口中所有的内容，那么就必须将内容缩小。

如何保证在移动端不自动缩放网页的尺寸?

	<!-- 通过meta设置视口大小 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<!--
		width=device-width   设置视口宽度等于设备的宽度
		initial-scale=1.0   初始缩放比例, 1不缩放
		maximum-scale：  允许用户缩放到的最大比例
		minimum-scale：  允许用户缩放到的最小比例
		user-scalable：  用户是否可以手动缩放
	-->

移动端常用适配方案

界面自动跳转

function isPc() {
    let userAgentInfo = navigator.userAgent;
    if(/iphone/i.test(userAgentInfo)){
        return false;
    }else if(/android/i.test(userAgentInfo)){
        return false;
    }
    return true;
}
if(!isPc()){
    location.href = "http://m.jd.com";
}

通过媒体查询 + rem

由于移动端也有很多的屏幕尺寸，所以也需要进行适配
例如：

iPhone3/4/5: 320px
iPhone678: 375px
iPhoneX/plus: 414px
当下在企业开发中设计师提供给我们的移动端设计图片是 750 * xxx 的或者 1125 * xxx 的。
所以我们需要对设计师提供的图片进行等比缩放，这样才能 1:1 还原设计图片。

如何等比缩放?

将设计图片等分为指定份数，求出每一份的大小。
例如： 750 设计图片分为 7.5 份，那么每一份的大小就是 100px。
将目标屏幕也等分为指定份数，求出每一份的大小。
例如：375 屏幕也分为 7.5 份，那么每一份的大小就是 50px。
用原始元素尺寸 / 原始图片每一份大小 * 目标屏幕每一份大小 = 等比缩放后的尺寸。
例如：设计图片上有一个150 * 150的图片，我想等比缩放显示到375屏幕上。
那么：150 / 100 * 50 = 1.5 * 50 = 75px。

如何在前端开发中应用这个计算公式?

目标屏幕每一份的大小就是 html 的 font-size: 50px。
使用时只需要用 “原始元素尺寸 / 原始图片每一份大小 rem” 即可。
150 / 100 = 1.5 / 1.5rem
1rem = 50px / 1.5rem === 1.5 * 50 = 75px

移动端常用适配方案

<!--可以让部分国产浏览器默认采用高速模式渲染页面-->
<meta name="renderer" content="webkit">
<!--为了让 IE 浏览器运行最新的渲染模式下-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<script>
    let scale = 1.0 / window.devicePixelRatio;
    let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
    document.write(text);
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
</script>

初始化 HTML 中的代码
利用 rem + 视口释放的方式来适配移动端
注意点：如果在 HTML 文件中用到了字符串模板，字符串模板中用到了变量，那么 html-plugin 是无法处理的，所以会报错。
如果想解决这个问题，那么我们需要再借助一个 loader，html-loader。
借助 postcss-pxtorem 实现自动将 px 转换成 rem。
借助 webpack 实现 CSS3/ES678 语法的兼容。
借助 fastclick 解决移动端 100~300ms 的点击事件延迟问题。
初始化默认的全局样式。

注意点：在移动端开发中，一般情况下我们不需要让字体大小随着屏幕尺寸的变化而变化。由于我们是通过视口缩放来适配移动端的，所以我们不能直接设置字体大小，否则字体大小就会随着屏幕尺寸的变化而变化。

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(html)$/,
          exclude: /node_modules/,
          use: {
            loader: 'html-loader',
            options: {
              minimize: true
            }
          }
        }
      ]
    }
  }
}

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 100, // 根元素字体大小
      propList: ['*']
    }
  }
}