移动端app屏幕适配

我们在开发移动端项目时经常会遇到屏幕适配问题，一般有两种适配方式：

方式1：vw vh适配

100vw为100%屏宽，100vh为100%高

一般这种方式会有些弊端，所以不太推荐

方式2：rem适配

这种方法可以很好的根据屏宽自动适配， 1rem为屏宽/10 （如750px的设计稿中， 1rem=75px）

在vue项目中使用rem手淘适配步骤：

1. 下载lib-flexible模块儿

npm install lib-flexible --save-dev

然后在main.js中引入lib-flexible

import "lib-flexible"

2. 下载postcss-px2rem 模块儿将rem转化为px

npm install postcss-px2rem

然后在项目根目录下创建配置vue配置文件vue.config.js。在vue.config.js文件中添加：

ps:这段代码不需要记下来，用的时候复制就完了。

module.exports = {css: {loaderOptions: {css: {},postcss: {plugins: [require("postcss-px2rem")({// 以设计稿为375px 为例 375/10 = 37.5// 表示1rem = 37.5pxremUnit: 37.5})]}}}
}

然后在根据计算将项目中px代替为相应的rem值就可以做到屏幕适配了(若你用的开发软件为vscode那么你可以下载px to rem插件就可以自动将你的px值计算为rem值，就省的自己去计算了）

移动端app屏幕适配相关推荐

实现移动端不同屏幕适配
静态页面,学习目标是实现移动端不同屏幕适配 html <!DOCTYPE html> <html lang="en"><head><met ...
再谈移动端Web屏幕适配
一个多月前水了一篇移动web屏幕适配方案,当时噼里啪啦的写了一通,自我感觉甚是良好.不过最近又有一些新的想法,和之前的有一些不同. 先说一下淘宝的方案,感觉现在好多的适配方案都是受了它的影响,上周六看 ...
(转)webapp兼容移动端的屏幕适配
亲测可用!!!! 屏幕适配终极方案 <meta name="viewport" content="width=你的基准像素, user-scalable=no&qu ...
vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
实现婚恋交友app源码的屏幕适配，需要知道哪些
大家在开发Android端的婚恋交友app源码时,肯定会觉得屏幕适配是个尤其痛苦的事,各种屏幕尺寸适配起来巨烦无比.如果我们换个角度我们看下这个问题,不知道大家有没有了解过web前端开发,或者说大家对 ...
移动端屏幕适配和css美化浏览器自带的滚动条
一.css美化浏览器自带的滚动条: 浏览器自带的滚动条显示不太美观,我们可以调css样式来美化一下.了解以下浏览器(webkit内核)滚动条自带伪类样式: ::-webkit-scrollbar:针对 ...
移动端高清、多屏幕适配方案
2019独角兽企业重金招聘Python工程师标准>>> 移动端高清.多屏幕适配方案 http://div.io/topic/1092 https://github.com/amfe/ ...
超详细的rem+vw移动端屏幕适配方案
在说具体内容之前,我们必须了解几个概念,就是:Retina屏.物理像素.设备独立像素.设备像素比在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中 ...
移动端屏幕适配+事件+常见问题解决
移动端屏幕适配 <meta name="viewport" content="width=device-width, initial-scale=1, maximu ...

移动端app屏幕适配

我们在开发移动端项目时经常会遇到屏幕适配问题，一般有两种适配方式：

方式1：vw vh适配

方式2：rem适配

移动端app屏幕适配相关推荐

最新文章

热门文章