8、手机适配问题之rem和lib-flexible

简介: 前言:GitHub:https://github.com/Ewall1106/mall一、关于lib-flexible.jsflexible方案是手淘经过多年的摸索和实战,总结出的一套移动端适配方案,这里我推荐一篇w3c大漠老师的一篇文章使用Flexible实现手淘H5页面的终端适配,里面详细的讲解了该方案的使用和原理。

前言:GitHub:https://github.com/Ewall1106/mall

一、关于lib-flexible.js

flexible方案是手淘经过多年的摸索和实战,总结出的一套移动端适配方案,这里我推荐一篇w3c大漠老师的一篇文章使用Flexible实现手淘H5页面的终端适配,里面详细的讲解了该方案的使用和原理。

另附github地址:https://github.com/amfe/lib-flexible,在github的readme中,作者建议大家开始使用viewport来代替flexible这个方案,其中我也看了一下抛出了文章链接,有一些postCSS新技术的运用,但人水平有限,如果大家感兴趣,可以用作者推荐的方案代替,

二、项目中使用

1、安装

$ cnpm install lib-flexible --save
img_274d6ce925bebd4b93a4e51ac5959f4c.png
install

2、main.js中引入

import 'lib-flexible/flexible.js'
img_9dad5fc2f969d9eba2fcca46fc85fbf8.png
main.js

3、viewport设置
我们进入index.html页面中定义meta,该标签定义了用户通过手指放大缩小无效,页面比例始终为1:1

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum=scale=1.0">

4、安装cssrem插件
cssrem插件是一个把px转换为rem的工具,GitHub:https://github.com/flashlizi/cssrem
为什么不安装px2rem-loader?
一般很多人都喜欢使用px2rem-loader,因为比起cssrem确实方便很多,但由于我在工作中基于微信做h5页面的时候会使用vux组件库,如果安装这个,需要在build/utils.js中的cssLoader中配置,这样会导致使用vux组件变形。

5、配置cssrem(以750*1334设计稿为例)
因为Flexible会将设计稿分成100份(主要是为例以后能更好的兼容vh和vw),而每一份被称为一个单位a;同时1rem单位被认定为10a,我们可以得出:

1a = 7.5px
1rem = 75px

所以我们进入vsc的首选项里面,把把html的font-size设置为75px:

img_5d0d0de307f49b17352cf29acfd4c6b2.png
html font-size

ps:sublime及其它编辑器参考文档解决

参考学习
https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
https://github.com/flashlizi/cssrem

目录
相关文章
|
5月前
|
SQL NoSQL 关系型数据库
若依修改02,若以提供了多种版本,RuoYi-Cloud和SpringBoot+Vue都是PC端的,如果想要适配手机端,用Uniapp+vue,导入Mysql和启动Redis
若依修改02,若以提供了多种版本,RuoYi-Cloud和SpringBoot+Vue都是PC端的,如果想要适配手机端,用Uniapp+vue,导入Mysql和启动Redis
|
5月前
|
人工智能 自然语言处理 Android开发
无法拒绝!GPT-4o 完美适配az手机,畅享丝滑体验
无法拒绝!GPT-4o 完美适配az手机,畅享丝滑体验
45 0
|
存储 缓存 安全
Android14 适配之——现有 App 安装到 Android14 手机上需要注意些什么?
Android14 适配之——现有 App 安装到 Android14 手机上需要注意些什么?
528 0
|
小程序
微信小程序:自定义头部(navigationStyle=custom)及手机适配
微信小程序:自定义头部(navigationStyle=custom)及手机适配
345 0
微信小程序:自定义头部(navigationStyle=custom)及手机适配
|
小程序
如何让你的小游戏适配不同尺寸的手机屏幕
本文主要内容:教你如何对游戏中的 UI,背景以及内容进行不同尺寸屏幕的适配,让你的小游戏在各种尺寸的屏幕上,都展示出最好的一面。 如果你没有任何的游戏开发经验,欢迎观看我的“人人都能做游戏”系列视频教程,它会手把手的教你做出自己的第一个小游戏。
451 0
判断手机类型的工具类——适配8.0手机
需求:在做集成推送方案的时候,需要根据不同的手机类型来启用不同的推送方案。 ①手机类型:小米、华为、其他手机 ②三种推送方案的注册时机: 友盟推送是在Applicaiton#onCreate中,不区分进程。 小米推送是在Applicaiton#onCreate中,只在主进程。 华为推送是在启动页,StartActivity#onCreate中。
|
JavaScript iOS开发
Vue适配PC+大屏,手机+ipad适配
Vue适配PC+大屏,手机+ipad适配
1415 0
Vue适配PC+大屏,手机+ipad适配
|
XML Android开发 开发者
Android手机 全面屏(18:9屏幕)适配指南
Android手机 全面屏(18:9屏幕)适配指南
323 0
Android手机 全面屏(18:9屏幕)适配指南
|
前端开发
html页面手机适配方法
html页面手机适配方法
676 0
|
前端开发
html页面手机适配方法
html页面手机适配方法
524 0