移动web--rem 自适应

Posted noraZhang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动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‘)

 

以上是关于移动web--rem 自适应的主要内容,如果未能解决你的问题,请参考以下文章

移动端自适应

浅谈移动端的自适应问题——响应式rem/em利用Js动态实现移动端自适应

Js动态设置rem来实现移动端字体的自适应代码

Paypal 自适应支付无法在移动设备上运行

WordPress解决优酷土豆视频移动端观看问题并自适应

css怎么自适应宽度