整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
錄：我們在開發(fā)移動端項目的時候會遇到不同的機型，比如：iPhone5、iPhone6 / 7等等；而我們需要兼容不同機型的屏幕寬度和大小；以至于在不同的手機上都能看到一樣的效果；那么我們就需要做適配兼容處理；今天給大家?guī)淼募嫒葸m配插件是：postcss-pxtorem 和 amfe-flexible的配合使用；
第一步：安裝
npm i -S amfe-flexible // 設(shè)置 rem 基準(zhǔn)值第二步：在main.js 文件中直接引用即可
import 'amfe-flexible'當(dāng)我們設(shè)置好以后；可以看到html標(biāo)簽中會出現(xiàn) font-size
第一步：安裝
npm install postcss-pxtorem --save-dev // 將單位轉(zhuǎn)化為 rem 值第二步：在文件的根目錄下創(chuàng)建 .postcssrc.js 文件
第三步：將一下代碼復(fù)制在文件中
module.exports={
plugins: {
autoprefixer: {
browsers: ['Android >=4.0', 'iOS >=8'],
},
'postcss-pxtorem': {
rootValue: 37.5, // 換算基數(shù)，如：你的設(shè)計圖是750的；那么這兒就可以寫成75，如果是375的，那么這兒就寫37.5即可
propList: ['*'],
},
},
};如果在開發(fā)的過程中有一些不想被轉(zhuǎn)換的ui庫或者說組件的時候就可以在 'postcss-pxtorem' 中添加一下代碼 selectorBlackList：表示不進行轉(zhuǎn)換組件，如不想轉(zhuǎn)換為vant組件的ui庫；就直接在數(shù)組中添加即可；但是這種的話會出現(xiàn)一個問題；那就是vant的所有組件還是按照px的，這樣就是造成vant組件這一塊不能自適應(yīng)；所以，這種不推薦
'postcss-pxtorem': {
rootValue: 37.5, // 換算基數(shù)，如：你的設(shè)計圖是750的；那么這兒就可以寫成75，如果是375的，那么這兒就寫37.5即可
selectorBlackList: ['van'], // 忽略ui組件的
propList: ['*'],
},一下推薦的配置是一下這種；由于vant是375的標(biāo)準(zhǔn)；所以直接給他配置成37.5即可，而他會根據(jù)配置好的進行轉(zhuǎn)換為rem基準(zhǔn)值；這樣也就不會出現(xiàn)問題了哈；重啟一下項目即可看到效果了；趕緊去試試吧！
module.exports={
plugins: {
autoprefixer: {
browsers: ['Android >=4.0', 'iOS >=8']
},
'postcss-pxtorem': { // 首先是設(shè)計圖是 750 的哈
rootValue ({ file }) { // 這兒是用來判定是都是自己的元素代碼 如果是巨劍的就用37.5 如果不是就用 75
return file.indexOf('van') !==-1 ? 37.5 : 75
},
propList: ['*'],
exclude: 'github-markdown'
}
}
}注意：如果在啟動項目的時候出現(xiàn)這個錯誤的話，那就是配置過高了，這個時候需要對配置做一些調(diào)整；如一下代碼
把這串代碼刪掉
browsers: ['Android >=4.0', 'iOS >=8']換成這串代碼；然后重啟一下；就不會保存了
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >=8"
]如果有什么不對的地方；歡迎大家補充；相互學(xué)習(xí)、共勉
段時間沒寫文章了，這段時間比較忙，很抱歉。
今天的這個手機登錄界面，使用了rem作為單位，自定義了字體，使用了模糊背景，半透明登陸框。效果是小編從網(wǎng)上看到的，就動手實現(xiàn)了下，分享給在座的諸位。小編才疏學(xué)淺，如果有什么不對或許要改進的地方，還望各位不吝賜教。
我們先來看下效果圖：
1、目錄簡單介紹下
images 放圖片
fonts 字體、字體圖標(biāo)
css 樣式表文件
base.css 基礎(chǔ)樣式
login.css login界面樣式
image
js javascript文件
flexible.js rem轉(zhuǎn)換px文件
login.js login頁面的其他js
login.html 登錄頁面
2、base.css文件：我們在 base.css 中定義字體、邊距、填充等，這里只指出一些關(guān)鍵點，想要源碼的話可以關(guān)注我們，然后再私信我們，我們會發(fā)給您。
① 通過效果圖，我們可以看到，placeholder提示文字是白色，所以在這里需要更改下：
input::-webkit-input-placeholder{
color:#fff;
}
② 定義字體，這里只用了ttf，因為手機下大部分都是webkit內(nèi)核，webkit內(nèi)核是支持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設(shè)置的字體大小無需我們設(shè)置。
3、flexible.js 文件可以將rem轉(zhuǎn)換成px，自動設(shè)置html的字體大小，這樣rem的值就會被瀏覽器根據(jù)html的字體大小實時解析成px，以適應(yīng)不同分辨率的手機。我們需要做兩步：
① 在頭部引入 flexible.js，讓它一上來就執(zhí)行：
<script type="text/javascript" src="./js/flexible.js"></script>
② 打開 flexible.js，找到最后一行，將兩個傳參改成設(shè)計稿的寬度，我這里設(shè)計稿是720，所以，修改如下：
;(function(designWidth, maxWidth) {
...
})(720, 720);
那么，在量出設(shè)計稿的像素值，在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、引入相關(guān)css、js，這里不多說了。
至此，準(zhǔn)備工作完成了，下面開始編寫頁面了。
背景高斯模糊，就不能直接設(shè)置到body上，否則body里面的內(nèi)容都會高斯模糊，所以單獨寫個section，來設(shè)置
<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);
}
效果圖如下：
出問題了，高斯模糊導(dǎo)致周邊變淡，玩過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);
}
效果圖如下：
注：因為背景定位了，所以里面的內(nèi)容都要定位并且z-index都要比它高。
頁面的內(nèi)容上下居中，無論什么分辨率，內(nèi)容始終在中間：
1、給body掛上 flex flex-middle，這個是在base里面定義好的flex樣式
<body class="flex flex-middle">
2、既然要垂直居中，body的高度肯定要100%，html也要設(shè)置，否則，body的100%沒作用：
body,html{
height: 100%;
}
.wrap{
padding:0 .85rem;
position: relative;
z-index: 2;
}
3、這個wrap就是居中容器，所有的內(nèi)容都放里面：
<section class="wrap"></section>
header比較簡單，要注意“Welcome”，有陰影，這里不能用盒子陰影box-shadow，而是用文字陰影text-shadow，它比box-shadow少個參數(shù)，即擴展。根據(jù)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>
效果如下
這個主要是頭像、輸入框和提交按鈕，都比較簡單，就不多說了。邊框小編設(shè)置的粗細(xì)是0.5px，這里并不代表邊框粗細(xì)就是0.5px。因為現(xiàn)在手機大部分都是視網(wǎng)膜屏，物理分辨率都是邏輯分辨率的2倍多，這里設(shè)置的0.5px是邏輯分辨率，轉(zhuǎn)換成物理像素大概就是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>
六、版權(quán)
這個沒什么好說的，居中，定位在底部
.copy{
position: absolute;
bottom: .2rem;
left: 0;
right: 0;
z-index: 2;
font-size: .23rem;
}
<footer class="copy tc mt40">
? 2019 IT學(xué)堂
</footer>
最終效果如下
想要源碼的話可以關(guān)注我們，然后再私信我們，我們會發(fā)給您。關(guān)注IT學(xué)堂，有更多干貨哦！
有非常高人氣的第三方定制 ROM 版本-- Lineage OS 今天發(fā)布了 18.1 版本更新，開始基于 Android 11 系統(tǒng)。目前官方已經(jīng)宣布適配 60 多款智能手機，包括 OnePlus、谷歌、小米、索尼、摩托羅拉、LG 以及包括舊型號在內(nèi)的三星設(shè)備。
>>>完整更新日志和下載
Lineage OS 18.1 包含了 Android Open Source Project (AOSP) 項目中的所有 Android 11 特性，比如帶有持久媒體播放器的新通知面板、浮動的 "氣泡 "通知、一次性權(quán)限、新的表情符號、鍵盤新的自動填充系統(tǒng)等等。
所有預(yù)裝的 Lineage 應(yīng)用均支持深色模式，F(xiàn)OSS “Etar”日歷應(yīng)用已經(jīng)取代了“停滯不前且基本沒有維護”的 AOSP calendar。FOSS 應(yīng)用 SeedVault 已被納入內(nèi)置備份解決方案，Lineage 的屏幕記錄器和音樂應(yīng)用也已改版。
谷歌以 AOSP 的形式發(fā)布 Android 源代碼，不過谷歌的 repo 并沒有針對設(shè)備進行特別的優(yōu)化。LineageOS 采用 AOSP代碼，并將其轉(zhuǎn)化為可運載的形狀，用自己的代碼修補任何缺失的組件，并添加一些自己的應(yīng)用程序來代替谷歌的專有應(yīng)用程序。
最重要的是，Lineage 有一支由志愿者組成的設(shè)備維護者隊伍，他們將Lineage的構(gòu)建移植到每一個特定的設(shè)備上，合并硬件支持和調(diào)試兼容性問題，以便各個型號的用戶能夠真正使用這個操作系統(tǒng)。今年，整個過程花了七個月。
Lineage 最大的應(yīng)用障礙 (也是你可能無法在你的設(shè)備上安裝它的原因)是行業(yè)對鎖定的引導(dǎo)程序的親和力。許多手機制造商和運營商不希望他們的客戶能夠控制他們所擁有的設(shè)備，所以他們鎖定了 bootloader，這阻止了用戶安裝第三方 ROM，獲得 root 權(quán)限以及完整的 NAND 閃存鏡像備份，以及在更新過程中出現(xiàn)問題時在恢復(fù)模式下復(fù)活手機的能力。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
