問題描述

現(xiàn)在在做公司移動端官網(wǎng)，用的rem布局，psd是750的，以iphone6為標(biāo)準(zhǔn)做的，但是換了其他設(shè)備就掛了，這個需要怎么調(diào)節(jié)，用媒體查詢嗎，感覺這個要改很多樣式

問題解答

個人意見：大容器比如你的兩個大圓組成的那個圖形的定位可以用rem做單位，但是內(nèi)部細(xì)節(jié)的一些東西，比如資源，設(shè)備，人員。。。這些小圖標(biāo)最好不要以rem為單位去設(shè)置，就用px去定位。因為本身設(shè)置的定位距離不是很大，所以用px和rem計算之后的取值其實(shí)并沒有太大出入，而用px為單位就不會隨著設(shè)備不同導(dǎo)致錯亂了。

建議做成canvas

因為不屬于方格式布局，圓形和非規(guī)則元素那么多的話，為了開發(fā)效率，建議針對幾種經(jīng)典尺寸（或者客戶量最多）做成圖片，其它分辨率就近適配。

不需要點(diǎn)擊的直接做成圖片，需要點(diǎn)擊或者交互的自己寫

瀏覽器上差別會很大。直接在設(shè)備上看吧。你可以給窗口固定寬度，讓他自己拉伸

一張圖想要做成一屏適應(yīng)不同設(shè)備靠一份設(shè)計稿簡直是妄想，你16:9的圖肯定不能完全適應(yīng)4:3的設(shè)備，而且中間還夾雜了各式各樣的瀏覽器，還有微信等一些亂七八糟的app，你要做的僅僅是做個取舍，是花大成本去完全適應(yīng)還是在容忍的條件下進(jìn)行降級？ 一般能簡單做成一屏并且適應(yīng)大部分設(shè)備的頁面都是內(nèi)容比較少，而且背景不是復(fù)雜圖片的頁面。

像你這個明顯是屬于被截的，要么弄出滾動條（我其實(shí)覺得這沒什么），要么手動調(diào)整內(nèi)容位置。用rem其實(shí)是沒什么問題的，關(guān)鍵是你是否有一個固定的范圍，我大部分H5都是用rem寫的，還有就是flex布局。

就比如說: 你計算位置的時候一定要以設(shè)計稿上的位置進(jìn)行計算-----假如你一個圖片的位置在設(shè)計稿(750寬)的left:320px；top:80px; 假設(shè)font-size：120px； 位置為320/750 = 0.427rem; 80/750 = 0.107rem;這時布局的時候請確保你的容器寬度 是 750px(max-width:6.25rem)； 無論瀏覽器窗口怎么變?nèi)萜饕恢倍际堑缺瓤s放的，以后只需要media html 的font-size就行

你可以看看我這個項目下的style.css和custom.css的 #container http://lonelymoon.linux2.jiuh...

padding-top :百分比；