1. 程式人生 > >移動web--rem 自適應

移動web--rem 自適應

rem 自適應--的兩種方式: 

  rem : font size of root element (根元素的字型大小)

  em : font size of element (父元素的字型大小)

1. 基於css 即媒體查詢的來進行螢幕自適應

  基與移動端的標準尺寸  640px,各種常見的螢幕尺寸下字型大小

寬度 320px 384px 480px 640px
螢幕對比比例 0.5  0.6 0.75 1
html font size
 
10px 12px 15px 20px
元素寬度(px) 100px 120px 150px 200px
元素寬度(rem) 10rem 12rem 15rem 20rem

@media only screen and (min-device-width:320px) {

  html {

    font-size: 10px;

  }

}

 

2. 基於js

  

$(window).on('resize', function
(){   var width = $('html').width();   var fontSize = width/640 *100;   $('html').css('font-size', fontSize); }).trigger('resize')