仅用于自我学习
转载自：前端大全
移动端适配方案
当我们在做 H5 移动端开发时，用到最多的单位是 px，也就是 css 像素，当页面缩放比为 1:1 时，一个 css 像素等于一个设备独立像素。但 css 像素是很容易被改变的，比如用户对页面进行放大，css 像素会被放大，此时的 css 像素会跨域更多的设备像素。
页面缩放系数 = css 像素 / 设备独立像素
rem 适配
rem（font size of the root element）是 css3 新增的一个相对单位，是指相对于根元素加的字体大小的单位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Document</title>
<style>
*{margin:0;padding:0}
.box{
width: 10rem;
height: 4rem;
background-color: antiquewhite;
font-size: 0.53rem; /* 20px*/
}
</style>
<script>
function setRootRem() {
const root = document.documentElement;
/** 以iPhone6为例：布局视口为375px，我们把它分成10份，则1rem = 37.5px，
* 这时UI给定一个元素的宽为375px（设备独立像素），
* 我们只需要将它设置为375 / 37.5 = 10rem。
*/
const scale = root.clientWidth / 10
root.style.fontSize = scale + 'px'
}
setRootRem()
window.addEventListener('resize', setRootRem)
</script>
</head>
<body>
<div class="box">eee</div>
</body>
</html>
ok，这里我们可以看到，我们在选用不同设备进行测试时，根节点的 font-size 会随着设备的布局视口的宽度变化而变化，所以这里的元素宽度 10rem 永远都是等于当前布局视口的宽度，font-size 也会随设备变化而变化。这就是所谓的移动端适配，其实这种方案最早是由阿里提出来的一个开源移动端适配解决方案 flexible ，原理非常简单。
但这样我们会发现在写布局的时候会非常复杂，也就是你需要自己手动去计算一下对应的 rem 值，比如上面的 font-size 设计稿上是 20px，那我们就要计算一下 20px 对应的 rem 是多少，按我们上面的规则， 1px = 1/37.5 rem ，所以 20px 应该对应 20/37.5 = 0.53 rem 。所以这种方案我们通常搭配着 css 预处理器使用。
rem 搭配 css 预处理器使用
这里我就用 vue+less 来简单操作一下，具体可以封装到底层，这里暂时演示一下原理。
这里推荐一下使用自制脚手架 songyao-cli 来快速生成一个 vue 项目，安装完依赖后，开始配置 less.
/*rem.less*/
@device-width: 375; /*设备布局视口*/
@rem: (@device-width/10rem);
然后将 @rem 配置成 less 全局变量
//vue.config.js
module.exports = {
css: {
loaderOptions:{
less: {
additionalData: ` @import '~@/static/rem.less';`
}
}
}
}
在 vue 的入口文件配置计算 rem 的方法
// toRem.js
export default function() {
const root = document.documentElement;
/** 以iPhone6为例：布局视口为375px，我们把它分成10份，则1rem = 37.5px，
* 这时UI给定一个元素的宽为375px（设备独立像素），
* 我们只需要将它设置为375 / 37.5 = 10rem。
*/
const scale = root.clientWidth / 10
root.style.fontSize = scale + 'px'
}
//main.js
import Vue from 'vue'
import App from './App.vue'
import toRem from "./utils/toRem" //
toRem()
window.addEventListener('resize', toRem)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
然后就可以在 vue 中使用全局变量 @rem 进行移动端开发了
<template>
<div class="songyao">
<h1>{{ username }}</h1>
<p>
了解脚手架及脚手架指令请移步个人博客<br>
check out the
<a href="http://47.100.126.169/zmengBlog" target="_blank" rel="noopener">逐梦博客</a>.
</p>
<p>微信公众号：<span class="wx_name">前端南玖</span></p>
</div>
</template>
<script>
export default {
name: 'songyao',
data() {
return {
username: 'songyao-cli(vue 模板)'
}
},
}
</script>
<style lang="less">
.songyao{
h1{
font-size: (24/@rem);
}
p{
font-size: (16/@rem);
}
.wx_name{
color:brown;
}
}
</style>
不过上面这种方案是一种过渡方案，viewport 是由苹果提出的一种方案，之前各大浏览器对其兼容性并不是很好，这才有了这种 rem 适配方案。
在阿里开源库 flexible 文档上有这么一句话：
由于 viewport 单位得到众多浏览器的兼容，lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来替代此方法。
对，这种方案已经在慢慢被抛弃了，不过还有不少企业在用。
vw、vh 适配
vw（viewport width）、vh（viewport height）是基于视图窗口的单位，是 css3 中提出来的，基于视图窗口的单位。
vw、vh 方案即将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分成 100 份。
上面的 flexible 方案就是模仿这种方案，因为早些时候 vw 还没有得到很好的兼容。
vw（Viewport's width）：1vw 等于视觉视口宽度的 1%vh（Viewport's height）：1vh 等于视觉视口高度的 1%vmin：vw 和 vh 中的较小值vmax：选取 vw 和 vh 中的较大值
如果按视觉视口为 375px ，那么 1vw = 3.75px ，这时 UI 给定一个元素的宽为 75px （设备独立像素），我们只需要将它设置为 75/3.75 = 20vw。
这里我们同样可以借助 less 来实现，不用自己去手动算，算的过程我们交给 less 就好了，我们直接按照设计稿上去开发就可以
// 还是rem.less 我们加一个@vw变量
@device-width: 375;
@rem: (@device-width/10rem);
@vw: (100vw/@device-width);
<template>
<div class="songyao">
<h1>{{ username }}</h1>
<p>
了解脚手架及脚手架指令请移步个人博客<br>
check out the
<a href="http://47.100.126.169/zmengBlog" target="_blank" rel="noopener">逐梦博客</a>.
</p>
<p>微信公众号：<span class="wx_name">前端南玖</span></p>
</div>
</template>
<script>
export default {
name: 'songyao',
data() {
return {
username: 'songyao-cli(vue 模板)'
}
},
}
</script>
<style lang="less">
.songyao{
h1{
// font-size: (24/@rem);
font-size: 24*@vw;
}
p{
// font-size: (16/@rem);
font-size: 16*@vw;
}
.wx_name{
color:brown;
}
}
</style>
viewport + px
ok，我们再来说一种 flexible 团队推荐的 viewport 方案。这种方案可以让我们在开发时不用关注设备屏幕尺寸的差异，直接按照设计稿上的标注进行开发，也无需单位的换算，直接用 px。
在 HTML 的 head 标签里加入 <meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" > 。
假如 UI 给我们提供的设计稿宽度是 375px ，我们则需要将页面的 viewport 的 width 设为 375 ，然后再根据设备的逻辑像素将页面进行整体缩放。
export function initViewport() {
const width = 375; // 设计稿宽度
const scale = window.innerWidth / width
// console.log('scale', scale)
let meta = document.querySelector('meta[name=viewport]')
let content = `width=${width}, init-scale=${scale}, user-scalable=no`
if(!meta) {
meta = document.createElement('meta')
meta.setAttribute('name', 'viewport')
document.head.appendChild(meta)
}
meta.setAttribute('content', content)
}
<template>
<div class="songyao">
<h1 class="name_rem">{{ username }}</h1>
<h1 class="name_vw">{{ username }}</h1>
<h1 class="name_px">{{ username }}</h1>
<p>
了解脚手架及脚手架指令请移步个人博客<br>
check out the
<a href="http://47.100.126.169/zmengBlog" target="_blank" rel="noopener">逐梦博客</a>.
</p>
<p>微信公众号：<span class="wx_name">前端南玖</span></p>
</div>
</template>
<script>
export default {
name: 'songyao',
data() {
return {
username: 'songyao-cli(vue 模板)'
}
},
}
</script>
<style lang="less">
.songyao{
p{
// font-size: (16/@rem);
font-size: 16*@vw;
}
.name_rem{
font-size: (24/@rem);
}
.name_vw{
font-size: 24*@vw;
}
.name_px{
font-size: 24px;
}
.wx_name{
color:brown;
}
}
</style>
这里我们将三种方案放在一起对比一下，都是对应375设计稿上24px，三种方案表现出来基本一致。
总结
目前来讲这三种方案是现在用的最多的方案，它们都有各自的优缺点。
rem 方案
- 适配原理稍复杂
- 需要使用 JS
- 设计稿标注的 px 换算到 css 的 rem 计算简单
- 方案灵活，既能实现整体缩放，又能实现局部不缩放
vw 方案
- 适配原理简单
- 不需要 JS 即可适配
- 设计稿标注的 px 换算到 css 的 vw 计算复杂
- 方案灵活，既能实现整体缩放，又能实现局部不缩放
viewport + px 方案
- 适配原理简单
- 需要使用 JS
- 直接使用设计稿标注无需换算
- 方案死板，只能实现页面级别肢体缩放
扫一扫
1814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
