整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
019-10-28 20:49
10月23日，榮耀手機官方宣布Magic UI 3.0的升級公測計劃正式開啟，今日，榮耀手機官微又公布了升級路徑，四款榮耀機型——榮耀20、榮耀20 PRO、榮耀V20和榮耀Magic2的用戶均可在“花粉俱樂部”APP進行升級申請，只需八個步驟即可開啟全場景式智能生活體驗。
公測升級路徑，八步簡單操作即刻開啟品質生活
自榮耀方傳出Magic UI 3.0的升級公測計劃后，便一直備受廣大用戶的期待。在此次升級計劃中，Magic UI 3.0在產品消費、智慧生活等方面都體現出了強大的技術性突破。不論是系統流暢度還是視覺呈現，都將為相關用戶帶來更為優異的使用體驗。現在，只需8個升級步驟，即可輕松暢享新系統下的高品質生活。具體步驟如下所示：
人性化AI美學彰顯品質升級，無感無縫智慧生活全面暢連
得益于Magic UI 3.0的賦能，極具產品競爭力的榮耀20系列在麒麟980的強大AI能力下，將在更加注重產品的人性化美學設計的同時，優化更多的產品細節體驗，全面革新用戶的消費使用感受。
例如，其采用了可以AI美學分析的“雜志鎖屏”功能，通過AI對雜志鎖屏的圖片進行布局分析，使文字布局“因圖而異”，實現媲美雜志封面的專業美工效果。而且為了提升系統整體交互體驗，Magic UI 3.0將“手、眼、心”合一的設計理念運用在點擊動效、切換動效、返回動效中，為用戶帶來更加自然流暢的綜合感受。
此外，Magic UI 3.0不但可以一次開發多終端部署、很好地兼顧分布式安全，還突破性地打破了Windows與Android的系統壁壘，實現了雙系統下的同屏操作、無縫拖拽的智能化文件互傳，以及無感、無縫連接的智慧行車高級體驗，讓用戶擁有的電子設備能夠實現完美的互助共享，感受高品質智能生活。
如虎添翼，榮耀20系列成最具競爭力手機
除了軟件的升級，榮耀20系列自身還搭載了出眾的硬件基礎和算法性能。旗艦芯片麒麟980保證了榮耀20系列強悍的游戲性能以及出眾的AI性能。后置4800萬超清AI四攝鏡頭、業界最大F1.4光圈、雙OIS四軸光學防抖以及204800 ISO超高感光度等硬核科技，保證了用戶白天、黑夜拍照的個性需求，而五項全球自研黑科技更是讓榮耀20系列手機成為同價位段最具競爭性的手機之一。
出色的性能，強悍的配資，相信適配升級Magic UI 3.0后的榮耀20系列，能夠以更強大的軟硬件協同式操作，在消費體驗和共享互聯等方面帶來更加強悍的性能反饋，從而完成智慧生活的新迭代升級。
責編：黎曉珊
版權作品，未經環球網 huanqiu.com 書面授權，嚴禁轉載，違者將被追究法律責任。
段時間沒寫文章了，這段時間比較忙，很抱歉。
今天的這個手機登錄界面，使用了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比較簡單，要注意“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學堂，有更多干貨哦！
為安卓手機用戶全心全意開發的一款瀏覽器應用，上網更快、更安全、更省流量，在提供極致的百度搜索體驗的同時還能滿足瀏覽網頁、獲取資訊、閱讀小說、觀看視頻、吐槽段子等全方位的信息及娛樂需求，是目前國內安卓手機平臺上最優秀的瀏覽器之一。
快來體驗吧：http://www.downxia.com/downinfo/17510.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
