移动端H5适配方法（盒子+图片+文字）

发布时间：2020-12-14 19:48:30 所属栏目：资源来源：网络整理

导读：div class="cnblogs_code" c.使用css3的单位rem 二.自适应动态设置html html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/} div class="cnblogs_code" { : ; } { : ; } { : ; } { : ; } { : ; } { : ; } { : ; } 方法二：根据屏幕分辨率来换算比例 rem字

c.使用css3的单位rem

二.自适应动态设置html

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}

{:; }{:; }{:; }{:; }{:; }{:; }{:; }

方法二：根据屏幕分辨率来换算比例

rem字体大小自适应

    .ending_box</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        position</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        top</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        left</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        width</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        height</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .ending_con</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        position</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        top</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 50%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        left</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 50%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        width</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 5rem</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        height</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 6rem</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        margin-left</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; -2.5rem</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        margin-top</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; -3rem</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .ending_con .ending_img</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        margin</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 0 auto</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .ending_con .ending_img img</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        width</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .ending_con .ending_txt</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        text-align</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; center</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        line-height</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 0.6rem</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        font-size</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 0.32rem</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        color</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;#333</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        margin-top</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 0.5rem</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        letter-spacing</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 2px</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000;"&gt;}</span>

    <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;style</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span><span style="background-color: #f5f5f5; color: #000000;"&gt;

    (</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(win,designW) {
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; doc </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; win.document;
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; docEle </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; doc.documentElement;
        designW </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; designW </span><span style="background-color: #f5f5f5; color: #000000;"&gt;||</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;640</span><span style="background-color: #f5f5f5; color: #000000;"&gt;; </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt;设计稿宽度px,默认640px设计稿</span>
        <span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; ratio </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; designW </span><span style="background-color: #f5f5f5; color: #000000;"&gt;/</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;100</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt;640px=> 1rem = 100px,超出640px font-size：100px;</span>
        <span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; or </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;orientationchange</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;in</span><span style="background-color: #f5f5f5; color: #000000;"&gt; win </span><span style="background-color: #f5f5f5; color: #000000;"&gt;?</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;orientationchange</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt; : </span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;resize</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
        </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt;创建viewport</span>

_createViewport();
if(doc.addEventListener){
win.addEventListener(or,_refreshRem,false);
doc.addEventListener("DOMContentLoaded",false);
}
/

创建viewport
*/
function _createViewport(){
var metaEl = doc.createElement('meta');
metaEl.setAttribute('name','viewport');
metaEl.setAttribute('content','initial-scale=1,user-scalable=no');
if (docEle.firstElementChild) {
docEle.firstElementChild.appendChild(metaEl);
}

        }
        </span><span style="background-color: #f5f5f5; color: #008000;"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000;"&gt;*
         * 动态更新rem
         </span><span style="background-color: #f5f5f5; color: #008000;"&gt;*/</span>
        <span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; _refreshRem() {
            </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; clientW </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; docEle.clientWidth </span><span style="background-color: #f5f5f5; color: #000000;"&gt;||</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;320</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
            </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt;设置最大和最小宽度取值</span>
            <span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(clientW </span><span style="background-color: #f5f5f5; color: #000000;"&gt;></span><span style="background-color: #f5f5f5; color: #000000;"&gt; designW){
                clientW </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; designW
            } </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;else</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(clientW</span><span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;320</span><span style="background-color: #f5f5f5; color: #000000;"&gt;){
                clientW</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;320</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
            }
            docEle.style.fontSize </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; clientW </span><span style="background-color: #f5f5f5; color: #000000;"&gt;/</span><span style="background-color: #f5f5f5; color: #000000;"&gt; ratio </span><span style="background-color: #f5f5f5; color: #000000;"&gt;+</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;px</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
        };
    })(window,</span><span style="background-color: #f5f5f5; color: #000000;"&gt;750</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);</span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt;750为设计稿宽度px值,根据实际设计稿大小对应设置</span>

    <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;head</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;body</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;class</span><span style="color: #0000ff;"&gt;="ending_box"</span><span style="color: #ff0000;"&gt; q-ctrl</span><span style="color: #0000ff;"&gt;="endingCtrl"</span><span style="color: #0000ff;"&gt;></span>
         <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;class</span><span style="color: #0000ff;"&gt;="ending_con"</span><span style="color: #0000ff;"&gt;></span>
                <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;p </span><span style="color: #ff0000;"&gt;class</span><span style="color: #0000ff;"&gt;="ending_img"</span><span style="color: #0000ff;"&gt;></span>
                       <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;img </span><span style="color: #ff0000;"&gt;src</span><span style="color: #0000ff;"&gt;="https://www.cnblogs.com/images/cnblogs_com/hejun26/1310858/o_longmao.jpg"</span><span style="color: #0000ff;"&gt;/></span>
                <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;p</span><span style="color: #0000ff;"&gt;></span>
                <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;p </span><span style="color: #ff0000;"&gt;class</span><span style="color: #0000ff;"&gt;="ending_txt"</span><span style="color: #0000ff;"&gt;></span>这里是测试的图片和文字,请切换屏幕大小查看效果！<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;p</span><span style="color: #0000ff;"&gt;></span>
         <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;body</span><span style="color: #0000ff;"&gt;></span>

</html>

b.有一个常用的属性作用在子盒子上

总结：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!