父元素  {
    width: 100%;
}

方法一
子元素左浮動(dòng)

方法二
display： flex;

實(shí)現(xiàn)根據(jù)屏幕寬度變化字體大小和盒子變化，使用rem;

保真問題：

如果你們?cè)O(shè)計(jì)稿標(biāo)準(zhǔn)是iphone5，那么拿到設(shè)計(jì)稿的時(shí)候一定會(huì)發(fā)現(xiàn)，完全不能按照高保真上的標(biāo)注來寫css，而是將各個(gè)值取半，這是因?yàn)橐苿?dòng)設(shè)備分辨率不一樣。設(shè)計(jì)師們是在真實(shí)的iphone5機(jī)器上做的標(biāo)注，而iphone5系列的分辨率是640，實(shí)際上我們?cè)陂_發(fā)只需要按照320的標(biāo)準(zhǔn)來。為了節(jié)省時(shí)間，不至于每次都需要將標(biāo)注取半，我們可以將整個(gè)網(wǎng)頁縮放比例，模擬提高分辨率。這個(gè)做法很簡單，為不同的設(shè)備設(shè)置不同的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像素看起來過粗的問題

針對(duì)屏幕變化大小

假如用戶開啟了轉(zhuǎn)屏設(shè)置，在網(wǎng)頁加載之后改變了屏幕的寬度，那么監(jiān)聽屏幕的變化就可以做到動(dòng)態(tài)切換元素樣式:

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

使用媒體查詢?cè)O(shè)置根元素字體大小

優(yōu)點(diǎn)，就是無需監(jiān)聽瀏覽器的窗口變化，它會(huì)跟隨屏幕動(dòng)態(tài)變化。
@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;
      }
    }