1、移动端适配方案

参考答案:
原则:
1、开发时方便，写代码时设置的值要和标注的 160px 相关。
2、方案要适配大多数手机屏幕，并且无 BUG。
3、用户体验要好，页面看着没有不适感。

思路:
1、写页面时，按照设计稿写固定宽度，最后再统一缩放处理，在不同手机上都能用
2、按照设计稿的标准开发页面，在手机上部分内容根据屏幕宽度等比缩放，部分内容按需要变化，需要缩放的元素使用 rem, vw 相对单位，不需要缩放的使用 px。
3、固定尺寸+弹性布局，不需要缩放。

viewport适配:

根据设计稿标准（750px 宽度）开发页面，写完后页面及元素自动缩小，适配 375 宽度的屏幕

在head里面设置如下代码:
<meta name="viewport" content="width=750,initial-scale=0.5">
initial-scale = 屏幕的宽度 / 设计稿的宽度

为了适配其他屏幕，需要动态的设置 initial-scale 的值

<head>
  <script>
    const WIDTH = 750
    const mobileAdapter = () => {
      let scale = screen.width / WIDTH
      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
      let meta = document.querySelector('meta[name=viewport]')
      if (!meta) {
        meta = document.createElement('meta')
        meta.setAttribute('name', 'viewport')
        document.head.appendChild(meta)
      }
      meta.setAttribute('content',content)
    }
    mobileAdapter()
    window.onorientationchange = mobileAdapter //屏幕翻转时再次执行
  </script>
</head>
缺点就是边线问题，不同尺寸下，边线的粗细是不一样的（等比缩放后），全部元素都是等比缩放，实际显示效果可能不太好。

vw适配（部分等比例放）

1、开发者拿到设计稿(假设设计稿尺寸为750px,设计稿的元素标注是基于此宽度标注)。
2、开始开发，对设计稿的标注进行转换，把px换成vw。比如页面元素字体标注的大小是32px，换成vw为 (100/750)*32 vw。
3、对于需要等比缩放的元素，CSS使用转换后的单位。
4、对于不需要缩放的元素，比如边框阴影，使用固定单位px。

关于换算，为了开发，利用自定义属性，css变量:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
  <script>
    const WIDTH = 750
    //:root { --width: 0.133333 } 1像素等于多少 vw
    document.documentElement.style.setProperty('--width', (100 / WIDTH)) 
  </script>
</head>

注意此时，meta里就不要去设置缩放了。
业务代码可以这样写:

header {
	font-size:calc(28vw * var(--width))
}

实现按需缩放。
rem适配：

1、开发者拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标是基于此宽度标注）
2、开始开发，对设计稿的标注进行转换
3、对于需要等比缩放的元素，CSS使用转换后的单位
4、对于不需要缩放的元素，比如边框阴影，使用固定单位px。
假设设计稿的某个字体大小是 40px, 手机屏幕上的字体大小应为 420/750*40 = 22.4px (体验好)，换算成 rem（相对于 html 根节点，假设 html 的 font-size = 100px,）则这个字体大小为 0.224 rem.

写样式时，对应的字体设置为 0.224 rem 即可，其他元素尺寸也做换算...但是有问题

举个 ，设计稿的标注 是40px，写页面时还得去做计算，很麻烦（全部都要计算）

能不能规定一下，看到 40px ,就应该写 40/100 = 0.4 rem,这样看到就知道写多少了（不用计算），此时的 html 的 font-size 就不能是 100px 了，应该为 (420*100)/750 = 56px，100为我们要规定的那个参数

根据不同屏幕宽度，设置 html 的 font-size 值

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
  <script>
    const WIDTH = 750 //设计稿尺寸
    const setView = () => {
      document.documentElement.style.fontSize = (100 * screen.width / WIDTH) + 'px'
    }
    window.onorientationchange = setView
    setView()
  </script>
</head>

对于需要等比缩放的元素，CSS使用转换后的单位：

header {
  font-size: .28rem;
}

对于不需要缩放的元素，比如边框阴影，使用固定单位px
header > span.active {
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

以上的三种适配方案，都是等比缩放，放到 ipad 上时（设计稿以手机屏幕设计的），页面元素会很大很丑，有些场景下，并不需要页面整体缩放（viewport 自动处理的也很好了），所以有时只需要合理的布局即可。
弹性盒适配(合理布局)

<meta name="viewport" content="width=device-width">

使用flex布局

section {
  display: flex;
}

总结一下，什么样的页面需要做适配（等比缩放）呢
页面中的布局是栅格化的

换了屏幕后，到底有多宽多高很难去做设置，整体的都需要改变，所以需要整体的缩放
头屏大图，宽度自适应，高度固定的话，对于不同的屏幕，形状就会发生改变（放到ipad上就变成长条了），宽度变化后，高度也要保持等比例变化
以上所有的适配都是宽度的适配，但是在某些场景下，也会出现高度的适配

比如大屏，需要适配很多的电视尺寸，要求撑满屏幕，不能有滚动条，此时若换个屏幕

此时需要考虑小元素用 vh, 宽和高都用 vh 去表示，中间的大块去自适应，这就做到了大屏的适配，屏幕变小了，整体变小了（体验更好），中间这块撑满了屏幕

对于更复杂的场景，需要更灵活考虑，没有一种适配方式可以囊括所有场景。

3、谈谈移动端点击

参考答案:
移动端 300 ms 点击（click 事件）延迟
由于移动端会有双击缩放的这个操作，因此浏览器在 click 之后要等待 300ms，判断这次操作是不是双击。

解决方案:
1、禁用缩放:user-scalable=no
2、更改默认视口的宽度。让默认窗口的大小等于浏览器宽度的大小，此时就不需要进行双击缩放了。
3、使用touch-action:none来设置css样式，其表示忽略默认行为，也就是300ms对该元素不生效。
4、使用fastclick这个js库。

4、点击穿透

解决方案:
1、将所有的click事件全部改为touch事件。
2、不使用touch事件，只使用click事件。
3、阻止默认事件。
4、引入faskclick.js

5、什么是响应式开发？

参考答案:
响应式开发是前端开发工作比较常见的工作内容，随着移动互联网的发展，移动端设计越来越重要，很多项目都是移动端项目先开发，而后是PC端的开发，为了降低运营成本和开发成本，同一个网站要能兼容PC端和移动端显示呼之欲出，进而响应式开发成了前端开发人员必备的技能，所以响应式开发的技术必须掌握。

什么是响应式:
1、Media Query（媒体查询）
用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸，是否可触摸，屏幕精度，横屏竖屏等信息。

2、使用em或者rem做尺寸单位，用于文字大小的弹性布局。

3、禁止页面缩放
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />
复制代码

4、屏幕尺寸相应:
响应式设计注意事项:
.宽度不固定，可以使用百分比
#head{width:100%;}
#content{width:50%;}

移动端总结?

相关文章

热门标签

最新文章