移动端开发自适应

1、rem与em

  • rem转化为像素大小取决于页根元素的字体大小,即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。
  • em,像素值将是em值乘以使用em单位的元素的字体大小。!注意不是相对于父元素
    (父元素的字体大小可以影响 em 值,但这种情况的发生,纯粹是因为继承。)
总结:
  • rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响,除非显式重写一个具体单位。

  • em 单位转为像素值,取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位。

适用情况:

移动端自适应设置html的font-size

 window.onload = function() {
        var width = window.screen.availWidth;
        width = width < 750 ? width : 750;
        var html = document.getElementsByTagName('html')[0]
        html.style.fontSize = width / 37.5 + 'px';
        console.log(html);
    }

2、布局时,一般不写高度,让内容撑开
3、布局时图片,一般只设置宽度,高度会等比例自适应。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。