父元素 {
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è)做法很簡(jiǎn)單宁玫，為不同的設(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;
}
}
