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小時內與您取得聯系。

整合營銷服務商