zoukankan      html  css  js  c++  java
  • H5网页移动端屏幕适配(rem单位的使用)

    1.动态设置viewport的scale
    var scale = 1 / devicePixelRatio;
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
     
    2.动态计算html的font-size
    var deviceWidth = document.documentElement.clientWidth;
    deviceWidth = deviceWidth > 640?640:deviceWidth;//物理分辨率大于1280则访问PC端,pad即访问电脑版
    document.documentElement.style.fontSize = deviceWidth / 10 + 'px';

    3.布局的时候,各元素的css尺寸=设计稿标注尺寸(以750为准)/75 rem
    sass文件中例子
    @function pm($n) {
    @return $n/75 *1+rem;
    }
    .content{
    pm(750);
    }

    4.html的font-size额外补充的媒介查询(视实际情况来做补充)
     
    最后将上述代码封装成函数调用
     
            function cssAdapter(){
                //1.动态设置viewport的scale
                var scale = 1 / devicePixelRatio;
                // <meta name="viewport" content="width=device-width, initial-scale=1.0">
                document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
                
                //2.动态计算html的font-size
                var deviceWidth = document.documentElement.clientWidth;
                deviceWidth = deviceWidth > 640?640:deviceWidth;//物理分辨率大于1280则访问PC端,pad即访问电脑版
                document.documentElement.style.fontSize = deviceWidth / 10 + 'px';
            };
            cssAdapter();
  • 相关阅读:
    bind函数
    尾置返回类型
    lambda表达式
    C++谓词
    capacity和size
    容器操作可能会使迭代器失效
    特殊的forward_list操作
    向顺序容器添加元素
    swap与assign
    迭代器
  • 原文地址:https://www.cnblogs.com/lemen/p/13157563.html
Copyright © 2011-2022 走看看