@TOC
前端必备工具推荐网站(免费图床、API和ChatAI等实用工具):
H5应用的开发是前端必备技能,h5适配移动端也是业务常见的场景,如何进行必要的适配,今天做一个比较全面的总结
我们先简单搭建这样一个场景,下面是用ve3搭建的一个h5页面,且是一个经典的三栏布局
<template>
<div class="wrap">
<li class="item" @click="changeFontSize(20)">大字体</li>
<li class="item" @click="changeFontSize()">中字体</li>
<li class="item" @click="changeFontSize(12)">小字体</li>
</div>
<p class="text">这是一行测试rem适配字体大小的文案啊</p>
<p class="text2">这是一行测试postCss插件适配字体大小的文案啊</p>
</template>
<style scoped>
.wrap {
color: #888;
display: flex;
width: 100%;
}
.item {
font-size: var(--myFonstSize, 15px);
text-align: center;
}
.item:nth-child(1) {
width: 100px;
height: 50px;
line-height: 50px;
background: red;
color: white;
}
.item:nth-child(2) {
flex: 1;
height: 50px;
line-height: 50px;
background: rgba(42, 193, 45, 0.667);
color: white;
}
.item:nth-child(3) {
width: 100px;
height: 50px;
line-height: 50px;
background: rgb(5, 93, 226);
color: white;
}
.text {
margin-top: 20px;
line-height: 50px;
background: rgb(32, 154, 206);
color: white;
/* 在375设计稿下14px 使用rem单位 */
font-size: 1.4rem;
}
.text2 {
margin-top: 20px;
line-height: 50px;
background: orange;
color: white;
font-size: 16px;
}
</style>
在html的header中加入以下适配移动端场景的meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
加入这个标签的意义是: 告诉查询此时是移动端场景,防止一些默认样式影响页面(比如默认宽度800px会撑出滚动条)
代码如下(示例):
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
body {
display: block;
/* 触发bfc */
overflow: hidden;
}
通过这段代码进行默认样式的清除,同时通过“overflow:hidden;”触发BFC,防止浮动塌陷等问题存在:
简单解释下BFC的:
BFC(Block Formatting Context),即块级格式化上下文,它是页面中的一块渲染区域,并且有一套属于自己的渲染规则:
比如整个网站字体大小是统一,那么我们可以用全局变量去控制:
:root {
--myFonstSize: 14px;
}
.item {
font-size: var(--myFonstSize, 15px);
text-align: center;
}
这样做我们还可以通过js去控制全局字体大小;
import { useCssVar } from '@vueuse/core'
const changeFontSize = (size = 14) => {
let mysize = useCssVar('--myFonstSize');
mysize.value = size + 'px';
console.log(mysize);
// useCssVar实现的原理是如下
// let _mySize = document.documentElement.style.getPropertyValue('--myFonstSize');
// document.documentElement.style.setProperty('--myFonstSize', size + 'px')
}
在移动端如果使用px这种绝对单位在不同尺寸屏幕下适配不好,所以我们需要使用像 rem \ em这种相对单位,现在提供两种方案:
方案一:结合vw 对root 下的font-size进行相对换算
以375的设计稿场景为例,换算过程如下:
/* 375px ---> 100vw
----- ------
10px ---> (root根字体的vw单位尺寸 = 2.667vw) */
:root {
--myFonstSize: 14px;
font-size: 2.667vw;
}
在使用场景就可以使用rem单位了
.text {
margin-top: 20px;
line-height: 50px;
background: orange;
color: white;
/* 在375设计稿下14px 使用rem单位 */
font-size: 1.4rem;
}
方案二:通过编写postCss插件结合vw 统一对对全部font-size绝对单位进行转换
PostCss官网:
https://postcss.docschina.org/doc/writing-a-plugin.html#%E5%85%A5%E9%97%A8
const defaultOptions = {
viewPortWidth: 375,
mediaQuery: false,
unitToConvert: 'px'
}
export const mypxToViewport = (options = defaultOptions) => {
options = Object.assign({}, defaultOptions, options);
return {
postcssPlugin: 'postcss-px-to-viewport',
/*
Root (root, postcss) {
// Transform CSS AST here
}
*/
Declaration (decl, postcss) {
// The faster way to find Declaration node
console.log('Declaration:', decl);
let value = decl.value;
//匹配到px 转换成vw
if (value.includes(options.unitToConvert)) {
const num = parseFloat(value)
const transformValue = (num / options.viewPortWidth) * 100
decl.value = `${transformValue.toFixed(2)}vw` //转换之后的值
}
}
/*
Declaration: {
color: (decl, postcss) {
// The fastest way find Declaration node if you know property name
}
}
*/
}
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。