實習(xí)期間主要在寫微信端H5，遇到的最大問題就是適配各個不同尺寸的屏幕。公司就我自己一個前端，只能自己摸索著來。
方法1：媒體查詢
這是最笨工作量最大的方法了，就是一個屏幕尺寸一個屏幕尺寸的適配，當(dāng)然你沒辦法適配到所有的手機型號，有的手機比較奇葩，同樣是5.5寸，有的矮胖，有的瘦高。我的方法是以iphone6為準(zhǔn)，然后向上適配5.5寸，向下適配4.7的iphone5，這個時候就能自適應(yīng)市場上的一些主流屏幕，然后在對其他品牌手機挑一部分手動適配。
對于工作量小的項目，這個方法還是簡單有效的，當(dāng)然沒辦法覆蓋所有設(shè)備，只是一個沒辦法的辦法，這樣做其實很痛苦，工作量也大。
方法2：定高不定寬
對于流式布局的頁面，我們只要把寬度設(shè)置為百分比，而高度設(shè)置為px，這樣寬度就可以自適應(yīng)，高度由于是流式布局，損失一點美感，再搭配簡單的媒體查詢，不會對布局造成太大的影響。
不過我在工作中寫的最多的是一些比較不常規(guī)的頁面，比如下面的這個蛋和錘子都是用絕對定位放上去的，這個時候不管是寬度還是高度都得照顧到。
剛開始我為了讓這顆蛋乖乖待在一個位置，用媒體查詢寫了好多位置和大小寬度，費時費力。
方法3：神奇的 vh、vw
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式