zoukankan      html  css  js  c++  java
  • App响应式布局

    1、手机的响应式布局,所有的单位用rem来表示。

      如:设计稿的宽度是750,则html标签的font-size=屏幕宽度/7.5。那么在网页中的尺寸 = 设计高上实际的尺寸/100.

    把下面的代码作为一个单独的resize.js文件,手机的页面引用这个文件。

    $("html").css({"font-size":$(window).width()/7.5});
    $(window).resize(function(){
        $("html").css({"font-size":$(window).width()/7.5});
    });

    2、移动端单位rem作为单位,一定要注意,换算后字体的px单位一定不能小于12px。不然的话,rem值非常小,字体还是会有12px的。当屏幕比较小,没什么影响,屏幕一大起来,字体就会变得很小,于其他的元素不统一了。

    3、rem单位和em结合起来使用会更好。有字体的标签里高度、行高使用em的有点非常明显。比如 : input标签,里面给文字设置大小,如果文字的高度比input高,溢出来的就会被切掉,字体只有一半。用em做单位就不会出现这种问题。基本上表单、表格、button的高度都用em做单位比较好。

    4、标签的高度和文字的高度有比较明显倍数关系,使用em作为单位,页面的自适应会非常好。

    5、手机端适配,开发的时候需要测试 机型(谷歌浏览器中的模拟手机)

      a、iPhone6

      b、iPhone5 

      c、Nexus5 

  • 相关阅读:
    成功的速度一定要大于父母老去的速度
    luogg_java学习_09_泛型_集合
    luogg_java学习_08_设计模式_API
    luogg_java学习_07_抽象类_接口_多态学习总结
    报表请求默认输出格式(html或者excel)设置
    XML报表开发基本过程
    rtf模板常用技巧
    xml模板提交请求submit_request
    XML基础知识
    HTML语言常用语法
  • 原文地址:https://www.cnblogs.com/wfblog/p/8992529.html
Copyright © 2011-2022 走看看