實(shí)習(xí)期間主要在寫(xiě)微信端H5，遇到的最大問(wèn)題就是適配各個(gè)不同尺寸的屏幕。公司就我自己一個(gè)前端，只能自己摸索著來(lái)。
方法1：媒體查詢
這是最笨工作量最大的方法了，就是一個(gè)屏幕尺寸一個(gè)屏幕尺寸的適配，當(dāng)然你沒(méi)辦法適配到所有的手機(jī)型號(hào)，有的手機(jī)比較奇葩，同樣是5.5寸，有的矮胖，有的瘦高。我的方法是以iphone6為準(zhǔn)，然后向上適配5.5寸，向下適配4.7的iphone5，這個(gè)時(shí)候就能自適應(yīng)市場(chǎng)上的一些主流屏幕，然后在對(duì)其他品牌手機(jī)挑一部分手動(dòng)適配。
對(duì)于工作量小的項(xiàng)目，這個(gè)方法還是簡(jiǎn)單有效的，當(dāng)然沒(méi)辦法覆蓋所有設(shè)備，只是一個(gè)沒(méi)辦法的辦法，這樣做其實(shí)很痛苦，工作量也大。
方法2：定高不定寬
對(duì)于流式布局的頁(yè)面，我們只要把寬度設(shè)置為百分比，而高度設(shè)置為px，這樣寬度就可以自適應(yīng)，高度由于是流式布局，損失一點(diǎn)美感，再搭配簡(jiǎn)單的媒體查詢，不會(huì)對(duì)布局造成太大的影響。
不過(guò)我在工作中寫(xiě)的最多的是一些比較不常規(guī)的頁(yè)面，比如下面的這個(gè)蛋和錘子都是用絕對(duì)定位放上去的，這個(gè)時(shí)候不管是寬度還是高度都得照顧到。
剛開(kāi)始我為了讓這顆蛋乖乖待在一個(gè)位置，用媒體查詢寫(xiě)了好多位置和大小寬度，費(fèi)時(shí)費(fèi)力。
