vue项目中移动端适配，postcss-pxtore

vue项目中移动端适配，postcss-pxtorem

录：我们在开发移动端项目的时候会遇到不同的机型，比如：iPhone5、iPhone6 / 7等等；而我们需要兼容不同机型的屏幕宽度和大小；以至于在不同的手机上都能看到一样的效果；那么我们就需要做适配兼容处理；今天给大家带来的兼容适配插件是：postcss-pxtorem 和 amfe-flexible的配合使用；

amfe-flexible

第一步：安装

npm i -S amfe-flexible  // 设置 rem 基准值

第二步：在main.js 文件中直接引用即可

import 'amfe-flexible'

当我们设置好以后；可以看到html标签中会出现 font-size

postcss-pxtorem

第一步：安装

npm install postcss-pxtorem --save-dev // 将单位转化为 rem 值

第二步：在文件的根目录下创建 .postcssrc.js 文件

第三步：将一下代码复制在文件中

module.exports={
  plugins: {
    autoprefixer: {
      browsers: ['Android >=4.0', 'iOS >=8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5, // 换算基数，如：你的设计图是750的；那么这儿就可以写成75，如果是375的，那么这儿就写37.5即可
      propList: ['*'],
    },
  },
};

如果在开发的过程中有一些不想被转换的ui库或者说组件的时候就可以在 'postcss-pxtorem' 中添加一下代码 selectorBlackList：表示不进行转换组件，如不想转换为vant组件的ui库；就直接在数组中添加即可；但是这种的话会出现一个问题；那就是vant的所有组件还是按照px的，这样就是造成vant组件这一块不能自适应；所以，这种不推荐

'postcss-pxtorem': {
      rootValue: 37.5, // 换算基数，如：你的设计图是750的；那么这儿就可以写成75，如果是375的，那么这儿就写37.5即可
      selectorBlackList: ['van'], // 忽略ui组件的
       propList: ['*'],
  },

一下推荐的配置是一下这种；由于vant是375的标准；所以直接给他配置成37.5即可，而他会根据配置好的进行转换为rem基准值；这样也就不会出现问题了哈；重启一下项目即可看到效果了；赶紧去试试吧！

module.exports={
  plugins: {
    autoprefixer: {
      browsers: ['Android >=4.0', 'iOS >=8']
    },
    'postcss-pxtorem': {    // 首先是设计图是 750 的哈
      rootValue ({ file }) {  //  这儿是用来判定是都是自己的元素代码 如果是巨剑的就用37.5 如果不是就用 75
        return file.indexOf('van') !==-1 ? 37.5 : 75
      },
      propList: ['*'],
      exclude: 'github-markdown'
    }
  }
}

注意：如果在启动项目的时候出现这个错误的话，那就是配置过高了，这个时候需要对配置做一些调整；如一下代码

把这串代码删掉

browsers: ['Android >=4.0', 'iOS >=8']

换成这串代码；然后重启一下；就不会保存了

overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >=8"
]

如果有什么不对的地方；欢迎大家补充；相互学习、共勉

段时间没写文章了，这段时间比较忙，很抱歉。

今天的这个手机登录界面，使用了rem作为单位，自定义了字体，使用了模糊背景，半透明登陆框。效果是小编从网上看到的，就动手实现了下，分享给在座的诸位。小编才疏学浅，如果有什么不对或许要改进的地方，还望各位不吝赐教。

我们先来看下效果图：

一、准备工作：

1、目录简单介绍下

images 放图片
fonts 字体、字体图标
css 样式表文件
base.css 基础样式
login.css login界面样式
image
js javascript文件
flexible.js rem转换px文件
login.js login页面的其他js
login.html 登录页面

2、base.css文件：我们在 base.css 中定义字体、边距、填充等，这里只指出一些关键点，想要源码的话可以关注我们，然后再私信我们，我们会发给您。

① 通过效果图，我们可以看到，placeholder提示文字是白色，所以在这里需要更改下：

input::-webkit-input-placeholder{
	color:#fff;
}

② 定义字体，这里只用了ttf，因为手机下大部分都是webkit内核，webkit内核是支持ttf格式的字体的。

@font-face {
 font-family: 'PingFangSC-Regular';
 src: url('../fonts/PingFangSC-Regular.ttf');
 font-weight: normal;
 font-style: normal;
}

③ 初始化字体大小，字体类型等

body,input{
	font-size: .26rem;
	font-family:'PingFangSC-Regular';
	color:#fff;
}

注：1、其他的边距、浮动、flex等，就不在这里写了，源码里面的base.css文件写的很清楚

2、rem单位，后面会有解释

3、由于有 flexible.js ，这里的html设置的字体大小无需我们设置。

3、flexible.js 文件可以将rem转换成px，自动设置html的字体大小，这样rem的值就会被浏览器根据html的字体大小实时解析成px，以适应不同分辨率的手机。我们需要做两步：

① 在头部引入 flexible.js，让它一上来就执行：

<script type="text/javascript" src="./js/flexible.js"></script>

② 打开 flexible.js，找到最后一行，将两个传参改成设计稿的宽度，我这里设计稿是720，所以，修改如下：

;(function(designWidth, maxWidth) {
	...
})(720, 720);

那么，在量出设计稿的像素值，在css中，除以100，就是rem。

4、新建login.html，放在根目录，在header头部加入下面的代码，让页面宽度等于手机宽度，并且禁止缩放：

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

5、在login.html的header加入下面的代码，禁止手机将页面中的号码格式化，否则影响美观：

<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

6、引入相关css、js，这里不多说了。

至此，准备工作完成了，下面开始编写页面了。

二、高斯模糊的背景

背景高斯模糊，就不能直接设置到body上，否则body里面的内容都会高斯模糊，所以单独写个section，来设置

<section class="bg"></section>
.bg{
	background:url(../images/bg.jpg) no-repeat center/cover;
	position: fixed;
	z-index: 1;
	top:0;
	left:0;
	right:0;
	bottom:0;
	filter:blur(15px);
}

效果图如下：

出问题了，高斯模糊导致周边变淡，玩过PS的都知道这个问题。我们只需要将背景容器放大点，超出body就行了，所以，修改后的css如下：

.bg{
	background:url(../images/bg.jpg) no-repeat center/cover;
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	filter:blur(15px);
	transform:scale(1.1);
}

效果图如下：

注：因为背景定位了，所以里面的内容都要定位并且z-index都要比它高。

三、整体居中

页面的内容上下居中，无论什么分辨率，内容始终在中间：

1、给body挂上 flex flex-middle，这个是在base里面定义好的flex样式

<body class="flex flex-middle">

2、既然要垂直居中，body的高度肯定要100%，html也要设置，否则，body的100%没作用：

body,html{
	height: 100%;
}
.wrap{
	padding:0 .85rem;
	position: relative;
	z-index: 2;
}

3、这个wrap就是居中容器，所有的内容都放里面：

<section class="wrap"></section>

三、头部header

header比较简单，要注意“Welcome”，有阴影，这里不能用盒子阴影box-shadow，而是用文字阴影text-shadow，它比box-shadow少个参数，即扩展。根据UI，测量的尺寸都除以100就是rem的值，如130px，这里就写1.3rem就可以了

.header h1{
	font-weight: normal;
	font-size: 1rem;
	text-shadow: 0 0 4px rgba(0,0,0,.5);
	text-align: center;
}
.header p{
	font-size: .22rem;
	text-align: center;
	line-height: 1.8
}
<header class="header">
 <h1>Welcome</h1>
 <p>
 Lorem ipsum sit amet,consectetur adipiscing dlit. Donec auctor neque sed pretium luctus.
 </p>
</header>

效果如下

四、主体部分

这个主要是头像、输入框和提交按钮，都比较简单，就不多说了。边框小编设置的粗细是0.5px，这里并不代表边框粗细就是0.5px。因为现在手机大部分都是视网膜屏，物理分辨率都是逻辑分辨率的2倍多，这里设置的0.5px是逻辑分辨率，转换成物理像素大概就是1px。

.avatar{
	width: 1.5rem;
	height: 1.5rem;
	display: block;
	margin: auto;
	border-radius: 999px;
	border:.5px solid #fff;
	box-shadow: 0 0 4px 0 rgba(0,0,0,.3);
}
.row *{
	height:.85rem;
	line-height: .85rem;
	width: 100%;
	text-align: center;
	border-radius: 999px;
	box-shadow: 0 0 4px 0 rgba(0,0,0,.3);
}
.row .ipt{
	background: transparent;
	border:.5px solid #fff;
}
.row .submit{
	background:linear-gradient(to bottom,#25af61,#149c4f);
	border:0 none;
	display: block;
	border:.5px solid #33c773;
}
<section class="main mt110">
 <img class="avatar" src="./images/avatar.jpg">
 <section class="row mt25">
 <input type="text" class="ipt" placeholder="User Name">
 </section>
 <section class="row mt25">
 <input type="password" class="ipt" placeholder="Password">
 </section>
 <section class="row mt25">
 <a href="javascript：;" class="submit">Login</a>
 </section>
</section>

六、版权

这个没什么好说的，居中，定位在底部

.copy{
	position: absolute;
	bottom: .2rem;
	left: 0;
	right: 0;
	z-index: 2;
	font-size: .23rem;
}
<footer class="copy tc mt40">
 ? 2019 IT学堂
</footer>

最终效果如下

想要源码的话可以关注我们，然后再私信我们，我们会发给您。关注IT学堂，有更多干货哦！

有非常高人气的第三方定制 ROM 版本-- Lineage OS 今天发布了 18.1 版本更新，开始基于 Android 11 系统。目前官方已经宣布适配 60 多款智能手机，包括 OnePlus、谷歌、小米、索尼、摩托罗拉、LG 以及包括旧型号在内的三星设备。

>>>完整更新日志和下载

Lineage OS 18.1 包含了 Android Open Source Project (AOSP) 项目中的所有 Android 11 特性，比如带有持久媒体播放器的新通知面板、浮动的 "气泡 "通知、一次性权限、新的表情符号、键盘新的自动填充系统等等。

所有预装的 Lineage 应用均支持深色模式，FOSS “Etar”日历应用已经取代了“停滞不前且基本没有维护”的 AOSP calendar。FOSS 应用 SeedVault 已被纳入内置备份解决方案，Lineage 的屏幕记录器和音乐应用也已改版。

谷歌以 AOSP 的形式发布 Android 源代码，不过谷歌的 repo 并没有针对设备进行特别的优化。LineageOS 采用 AOSP代码，并将其转化为可运载的形状，用自己的代码修补任何缺失的组件，并添加一些自己的应用程序来代替谷歌的专有应用程序。

最重要的是，Lineage 有一支由志愿者组成的设备维护者队伍，他们将Lineage的构建移植到每一个特定的设备上，合并硬件支持和调试兼容性问题，以便各个型号的用户能够真正使用这个操作系统。今年，整个过程花了七个月。

Lineage 最大的应用障碍 (也是你可能无法在你的设备上安装它的原因)是行业对锁定的引导程序的亲和力。许多手机制造商和运营商不希望他们的客户能够控制他们所拥有的设备，所以他们锁定了 bootloader，这阻止了用户安装第三方 ROM，获得 root 权限以及完整的 NAND 闪存镜像备份，以及在更新过程中出现问题时在恢复模式下复活手机的能力。

在线咨询

上一篇：保存自己收藏的页面为html文件，放在电脑的桌面上
下一篇：12个冷门App，真的非常实用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商