• 移动手机端网页布局 常用的3种方式 总结


    手机端网页现在已经发展的非常迅猛,很多公司度需要网页能兼容各种不同尺寸屏幕的手机。

    下面我给大家讲讲我常用的3放布局方式:

    1:响应式布局。

        可以用px作为像素,网页进行平铺。全屏的用100%。高度可以用px写死,宽度可以用百分比。不管网页怎么拉伸,高度不变,宽度会相应的扩大。

       

    2:em/rem  方式布局。

    可以设置好html,body的字体大小,然后用不同的尺寸手机访问的时候,我们可以去修改body的字体大小,网页(网页的内容用rem设置宽度、高度)的之内容会自动进行缩放。

    代码如:

    body{ background:#f6f6f6;}
    .header{ padding:0px 0.2rem; position:relative; text-align:center; font-size:0.3rem; height:0.7rem; line-height:0.7rem; background:#f6f6f6; border-bottom:1px solid #d8d4d4;}
    .header .menuSite{ position:absolute; 0.36rem; height:0.27rem; background:url(../images/index_05.png) no-repeat; background-size:contain; top:.21rem; right:.2rem;}
    .blank20 {
    display: block;
    height: .2rem;
    background:none;
    }
    .sg_case,.wx_baodian{ padding-bottom:0.2rem; background:#fff;}
    h2.baseTitle{
    padding: .26rem .2rem;
    height: .37rem;
    line-height: .37rem;
    color: #222222;
    text-align:center;
    position:relative;
    }

    问题:那如果 去根据屏幕的不同尺寸 修改body字体大小呢?

    一般有两种方式:

    1:用js控制:

    function a() {

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + "px";

    }

    window.addEventListener("resize", a, !1);

    a();

    2:用媒体查询方式控制字体大小:

    @media only screen and (max- 359px) {
    html {
    font-size:12px
    }
    }

    @media only screen and (min- 360px) and (max- 374px) {
    html {
    font-size:13.5px
    }
    }

    @media only screen and (min- 375px) and (max- 399px) {
    html {
    font-size:14.0625px
    }
    }

    @media only screen and (min- 400px) and (max- 413px) {
    html {
    font-size:15px
    }
    }

    @media only screen and (min- 414px) and (max- 479px) {
    html {
    font-size:15.525px
    }
    }

    @media only screen and (min- 480px) and (max- 539px) {
    html {
    font-size:18px
    }
    }

    @media only screen and (min- 540px) and (max- 639px) {
    html {
    font-size:20.25px
    }
    }

    @media only screen and (min- 640px) and (max- 719px) {
    html {
    font-size:24px
    }
    }

    @media only screen and (min- 720px) {
    html {
    font-size:27px
    }
    }

    3.可以按照设计稿的宽 高 来写css,然后通过js判断不同尺寸屏幕,修改<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 里面 scale的比例大小。


    比如设计稿是 640 * 1136

    我们可以按 640宽度写网页 也可以按320宽度写网页。

    然后 <meta name="viewport" content="width=320,initial-scale=1,user-scalable=no">

    默认宽度可以设置为你写网页的宽度。

    然后再通过js 来控制scale的比例缩放即可 也可以控制 最小宽度 跟 最大宽度。

  • 相关阅读:
    [Oracle] Data Guard 系列(5)
    微软安全新闻聚焦-双周刊第三十七期
    小KING教你做android项目(一)
    CF 39E What Has Dirichlet Got to Do with That? (博弈)
    SQLServer 2000 Driver for JDBC][SQLServer]传入的表格格式数据流(TDS)远程过程调用(RPC)协议流不正确解决方法
    二分图带权最大独立集 网络流解决 hdu 1569
    (step6.1.3)hdu 1875(畅通工程再续——最小生成树)
    linux patch
    fuelSources
    memory_target not supported on this system
  • 原文地址:https://www.cnblogs.com/hailun/p/6245008.html
Copyright © 2020-2023  润新知