• 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 

  • 相关阅读:
    DirectX9:基础篇 第六章 颜色
    DirectX9:应用篇 论OBJ模型文件格式
    MFC:绘图基础
    DirectX9:基础篇 纹理
    DirectX9:应用篇 论OBJ模型文件和.X模型文件互转
    MFC:控件位置调整
    数据结构:二叉树
    DirectX9:总结篇 数据类型结构
    C89:论结构体/枚举体/联合体的使用
    css布局汇总
  • 原文地址:https://www.cnblogs.com/wfblog/p/8992529.html
Copyright © 2020-2023  润新知