• 移动手机端网页布局 常用的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的比例缩放即可 也可以控制 最小宽度 跟 最大宽度。

  • 相关阅读:
    图片自适应浏览器窗口宽度——就是响应式图片等比缩放效果
    iconfont.cn阿里巴巴矢量图下载字体图标实战
    layer.layui.com 一个不错的弹窗层js插件库
    自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)
    css3实战版的点击列表项产生水波纹动画——之jsoop面向对象封装版
    css3实战版的点击列表项产生水波纹动画
    一个简单版的波纹css3动画
    CSS3动画效果——js调用css动画属性并回调处理详解
    CSS3 :target伪类实现Tab切换效果 BY commy
    css :active伪类的理解
  • 原文地址:https://www.cnblogs.com/hailun/p/6245008.html
Copyright © 2020-2023  润新知