因?yàn)橐锰啵瑹o法一一給出鏈接，特此聲明；




UI篇由于對(duì)H5頁面的開發(fā)較" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 移動(dòng)端H5設(shè)計(jì)稿和前端切圖

移動(dòng)端H5設(shè)計(jì)稿和前端切圖

時(shí)間：2023-09-01 21:48:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-01 21:48:01 來源：網(wǎng)站運(yùn)營

移動(dòng)端H5設(shè)計(jì)稿和前端切圖：以下所有內(nèi)容來自各網(wǎng)站的復(fù)制粘貼和搜索的總結(jié)，感謝引用中的各位作者。

因?yàn)橐锰?，無法一一給出鏈接，特此聲明；




UI篇

由于對(duì)H5頁面的開發(fā)較少并且非規(guī)范，當(dāng)我們?cè)谧鍪謾C(jī)端H5網(wǎng)頁設(shè)計(jì)稿時(shí)（當(dāng)然包含微信端的H5網(wǎng)頁設(shè)計(jì)），UI設(shè)計(jì)師和前端工程師對(duì)尺寸很是糾結(jié)；




我們先從UI在討論到前端；




智能手機(jī)尺寸表：

其中iPhone6+采用了分辨率降頻處理，其分辨率為1920×1080，可以理解為

我們常說的屏幕分辨率 = 物理像素 （都是屏幕的實(shí)際具有的像素?cái)?shù)目）

屏幕尺寸：屏幕的對(duì)角線的長度，單位為英寸，比如：

設(shè)備獨(dú)立像素 = 邏輯像素（也叫做邏輯點(diǎn)，logic point，單位pt）

邏輯像素 x devicePixelRatio= 實(shí)際尺寸（物理像素），值為近似相等值；

devicePixelRatio：倍率




倍率是做什么用的呢？

UI在提供給前端設(shè)計(jì)圖的時(shí)候，一定要注意自己的設(shè)計(jì)圖尺寸是按照多少倍率設(shè)計(jì)的，這樣在前端開發(fā)的時(shí)候才會(huì)與設(shè)計(jì)圖匹配度更高；

@2x，所有的字體間隙一定要是2的倍數(shù)；

@3x，所有的字體間隙一定要是3的倍數(shù)；




那么用iphone6plus的尺寸開發(fā)時(shí)，選擇1242 x 2208 還是 1080 x 1920？




以下搜索總結(jié)出，最佳的UI尺寸：

750 x 1334 @2x iphone6

720 x 1280 @2x 紅米4x

640 x 1136 @2x iphone5




網(wǎng)頁的安全寬度：京東 1210px

天貓 寬屏1190px 窄屏990px

美團(tuán) 1200px

微博 大屏1280px 中屏1000px 小屏760px




視覺設(shè)計(jì)：畫布1920px時(shí)，實(shí)際要用1903 + 17（右側(cè)滾動(dòng)條寬度）

但為了取整，通常17px的滾動(dòng)條忽略，采用1920




前端篇

viewpoint：h5頁面的前端代碼里必須包含<meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”viewport” />




這里舉例640 x 960（可以使任意高） @2x的設(shè)計(jì)稿

方法一

①取一個(gè)100px的font-size為參照；

②設(shè)計(jì)稿豎直放時(shí)的橫向分辨率為640px，為了計(jì)算方便，那么body元素的寬度就可以設(shè)置為width: 6.4rem，于是html的font-size=deviceWidth / 6.4。這個(gè)deviceWidth就是viewport設(shè)置中的那個(gè)deviceWidth。




deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px




這個(gè)deviceWidth通過document.documentElement.clientWidth就能取到了，所以當(dāng)頁面的dom ready后，做的第一件事情就是：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';




例如：

網(wǎng)易的這種做法：

（1）先拿設(shè)計(jì)稿豎著的橫向分辨率除以100得到body元素的寬度：

如果設(shè)計(jì)稿基于iphone6，橫向分辨率為750，body的width為750 / 100 = 7.5rem
如果設(shè)計(jì)稿基于iphone4/5，橫向分辨率為640，body的width為640 / 100 = 6.4rem

（2）布局時(shí)，設(shè)計(jì)圖標(biāo)注的尺寸除以100得到css中的尺寸，單位為rem，比如下圖：

播放器高度為210px，寫樣式的時(shí)候css應(yīng)該這么寫：height: 2.1rem。之所以取一個(gè)100作為參照，就是為了這里計(jì)算rem的方便！

（4）font-size可能需要額外的媒介查詢，并且font-size不能使用rem，如網(wǎng)易的設(shè)置：

@media screen and (max-width:321px){
.m-navlist{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
.m-navlist{font-size:16px}
}

@media screen and (min-width:400px){
.m-navlist{font-size:18px}
}




當(dāng)deviceWidth大于640時(shí)，則物理分辨率大于1280（這就看設(shè)備的devicePixelRatio這個(gè)值了），也就是說當(dāng)deviceWidth大于設(shè)計(jì)稿的橫向分辨率時(shí)，html的font-size始終等于橫向分辨率/body元素寬；

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';




對(duì)比iphone4和iph6下面兩邊的間距，4多很多，說明拉勾對(duì)4肯定是做過適配的，從代碼也可以證實(shí)這一點(diǎn)：

不過如果你拿到的是根據(jù)4的設(shè)計(jì)稿，那就沒有問題，比4分辨率大的設(shè)備肯定能顯示根據(jù)4的尺寸做出來的東西。

還有一點(diǎn)，這種情況css尺寸單位用px就好，不要用rem，避免增加復(fù)雜度。




淘寶的這種做法：

（1）取一個(gè)75px的font-size為參照；

（2）設(shè)計(jì)稿豎直放時(shí)的橫向分辨率為750px，為了計(jì)算方便，那么body元素的寬度就可以設(shè)置為width: 10rem，于是html的font-size=deviceWidth /10。這個(gè)deviceWidth就是viewport設(shè)置中的那個(gè)deviceWidth。

（3）設(shè)備的物理分辨率/(devicePixelRatio * scale)，在scale為1的情況下，device-width = 設(shè)備的物理分辨率/devicePixelRatio 。

devicePixelRatio稱為設(shè)備像素比，每款設(shè)備的devicePixelRatio都是已知，并且不變的，目前高清屏，普遍都是2，不過還有更高的，比如2.5, 3 等，我魅族note的手機(jī)的devicePixelRatio就是3。淘寶觸屏版布局的前提就是viewport的scale根據(jù)devicePixelRatio動(dòng)態(tài)設(shè)置：




在devicePixelRatio為2的時(shí)候，scale為0.5

在devicePixelRatio為3的時(shí)候，scale為0.3333

這么做目的當(dāng)然是為了保證頁面的大小與設(shè)計(jì)稿保持一致了，比如設(shè)計(jì)稿如果是750的橫向分辨率，那么實(shí)際頁面的device-width，以iphone6來說，也等于750，這樣的話設(shè)計(jì)稿上標(biāo)注的尺寸只要除以某一個(gè)值就能夠轉(zhuǎn)換為rem了。




動(dòng)態(tài)計(jì)算js設(shè)置viewport的方法如下：

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');




動(dòng)態(tài)計(jì)算html的font-size的方法如下：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';




（4）布局的時(shí)候，各元素的css尺寸=設(shè)計(jì)稿標(biāo)注尺寸/設(shè)計(jì)稿橫向分辨率/10

（5）font-size可能需要額外的媒介查詢，并且font-size不使用rem，這一點(diǎn)跟網(wǎng)易是一樣的。

最后還有一個(gè)情況要說明，跟網(wǎng)易一樣，淘寶也設(shè)置了一個(gè)臨界點(diǎn)，當(dāng)設(shè)備豎著時(shí)橫向物理分辨率大于1080時(shí)，html的font-size就不會(huì)變化了，原因也是一樣的，分辨率已經(jīng)可以去訪問電腦版頁面了。




比較網(wǎng)易與淘寶的做法

共同點(diǎn)：

不同點(diǎn)：

//定義一個(gè)變量和一個(gè)mixin

@baseFontSize: 75;//基于視覺稿橫屏尺寸/100得出的基準(zhǔn)font-size
.px2rem(@name, @px){
@{name}: @px / @baseFontSize * 1rem;
}


//使用示例：

.container {
.px2rem(height, 240);
}


//less翻譯結(jié)果：
.container {
height: 3.2rem;
}

以上部分摘自u(píng)lr：http://www.cnblogs.com/axl234/p/5156956.html

方法二

①定義基準(zhǔn)值：html {font-size:50px}（設(shè)計(jì)圖 width:640px 為基準(zhǔn)）

html的font-size計(jì)算方式:當(dāng)前設(shè)備寬度 * html基準(zhǔn)值的font-size / 基準(zhǔn)的設(shè)計(jì)圖的寬度
@media screen and (min-width:320px) {html {font-size:25px}} 320 * 50 /640 = 25
@media screen and (min-width:360px) {html {font-size:28.12px}} 360 * 50 /640 = 28.125
@media screen and (min-width:375px) {html {font-size:29.3px}} 375*50/640 = 29.296875
@media screen and (min-width:384px) {html {font-size:30px}}
@media screen and (min-width:400px) {html {font-size:31.25px}}
@media screen and (min-width:414px) {html {font-size:32.34px}}
@media screen and (min-width:480px) {html {font-size:37.5px}}
@media screen and (min-width:540px) {html {font-size:42.19px}}
@media screen and (min-width:640px) {html {font-size:50px}}
@media screen and (min-width:720px) {html {font-size:56.25px}}
@media screen and (min-width:960px) {html {font-size:75px}}
@media screen and (min-width:1024px) {html {font-size:80px}}

②布局時(shí)，設(shè)計(jì)圖標(biāo)注的尺寸除以50得到css中的尺寸；單位為rem；

③部分margin、border和padding仍然用px為單位；




注意：rem參照html的font-size，所有的字體大小均相對(duì)于html元素；

em參照body的font-size，所有的字體大小均相對(duì)于父元素；

px換算成rem 所得rem = 實(shí)際px / 基準(zhǔn)值

關(guān)鍵詞：設(shè)計(jì),移動(dòng)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉