父元素  {
    width: 100%;
}

方法一
子元素左浮動

方法二
display： flex;

實現根據屏幕寬度變化字體大小和盒子變化，使用rem;

保真問題：

如果你們設計稿標準是iphone5，那么拿到設計稿的時候一定會發現，完全不能按照高保真上的標注來寫css，而是將各個值取半，這是因為移動設備分辨率不一樣。設計師們是在真實的iphone5機器上做的標注，而iphone5系列的分辨率是640，實際上我們在開發只需要按照320的標準來。為了節省時間，不至于每次都需要將標注取半，我們可以將整個網頁縮放比例，模擬提高分辨率。這個做法很簡單，為不同的設備設置不同的meta即可:

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
解決安卓下1px像素看起來過粗的問題

針對屏幕變化大小

假如用戶開啟了轉屏設置，在網頁加載之后改變了屏幕的寬度，那么監聽屏幕的變化就可以做到動態切換元素樣式:

window.onresize = _.debounce(function() {
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
}, 50);

使用媒體查詢設置根元素字體大小

優點，就是無需監聽瀏覽器的窗口變化，它會跟隨屏幕動態變化。
@media screen and (device-width: 640px) { /*iphone4/iphon5*/
      html {
        font-size: 100px;
      }
    }
@media screen and (device-width: 750px) { /*iphone6*/
      html {
        font-size: 117.188px;
      }
    }
@media screen and (device-width: 1240px) { /*iphone6s*/
      html {
        font-size: 194.063px;
      }
    }