移动端web页面适配解决方案--flexible方案

最新推荐文章于 2024-04-29 11:17:53 发布

hxf6060

最新推荐文章于 2024-04-29 11:17:53 发布

阅读量1k

点赞数 2

文章标签：移动端适配 flexible px2rem vue

本文链接：https://blog.csdn.net/hxf6060/article/details/89515349

版权

做web开发的童鞋们通常都会遇到移动端页面开发，而手机屏幕尺寸不一，因此页面适配是我们必须解决的问题。下面介绍一种简单又效果非常不错的解决方案--flexible方案。（注：这里以vue项目为例）

一、搭建vue项目

首先我们搭建一个vue项目，关于搭建vue项目步骤，这里不再介绍，可以参考本人前面写的vue+axios+element-ui实战（一）--使用Vue CLI 搭建项目。只是第五步安装element-ui请忽略。

二、安装flexible

npm install lib-flexible --save

安装成功后，在项目入口文件main.js中添加如下代码，引入flexible：

这时我们启动项目，会发现<html>元素添加了data-dpr属性，并且动态改写data-dpr的值，并且<html>元素添加font-size属性，并且动态改写font-size的值：

其实flexible的实质，就是能过JS来动态改写meta标签。

三、安装px2rem-loader

npm install px2rem-loader --save-dev

安装成功后，找到文件 build/utils.js,添加如下配置：

const px2remLoader = { 
    loader: 'px2rem-loader', 
    options: { 
        remUnit: 75 // 设计稿的1/10，这里以750*1334的设计稿为例
    } 
}

然后改写如下配置：

启动项目，我们就可以在写代码时直接用设计稿上的单位了，px2rem会帮我们把px转换成rem，如果有某些不想转换的，你可以在css后面加上 /*no*/，这样就不会对px进行处理，我们来在HelloWorld里面写个小测试：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="test">测试测试</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
  .test{
    width: 100%;
    height: 100px;
    line-height: 100px;
    font-size: 16px; /*no*/ // 字号不做rem转换
    background: #f99;
  }
</style>

我们用iphone6/7/8模式，处理后如下：

切换不同的手机，就可以发现渲染出来的盒子大小是不一样的了。

其实真正理解适配问题，还需要了解视窗 viewport、物理像素(physical pixel)、设备独立像素(density-independent pixel)等等概念，大家可以参考：使用Flexible实现手淘H5页面的终端适配这篇文章。

做移动也可以用一些UI 库，以下介绍一些资源：

1、vonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用；

2、vux 基于WeUI和Vue(2.x)开发的移动端UI组件库；

3、Mint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库；

4、MUI 最接近原生APP体验的高性能前端框架；

5、Muse-ui 基于 Vue 2.0 和 Material Design 的 UI 组件库；

6、Cube UI滴滴 WebApp 团队实现的基于 Vue.js 实现的精致移动端组件库。

hxf6060

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
移动端web页面适配解决方案--flexible方案

做web开发的童鞋们通常都会遇到移动端页面开发，而手机屏幕尺寸不一，因此页面适配是我们必须解决的问题。下面介绍一种简单又效果非常不错的解决方案--flexible方案。（注：这里以vue项目为例）一、搭建vue项目首先我们搭建一个vue项目，关于搭建vue项目步骤，这里不再介绍，可以参考本人前面写的vue+axios+element-ui实战（一）--使用Vue CLI 搭建项目。只是第五...
复制链接

扫一扫